如何调整 unicode flat 符号的字距答案

【问题标题】：How to adjust kerning for the unicode flat symbol如何调整 unicode flat 符号的字距
【发布时间】：2021-12-29 03:45:51
【问题描述】：

我试图描述一个和弦，B♭，但它在<option> HTML 标记中显得很奇怪。它不是“B♭”，而是在“B”和“♭”之间出现明显的空格。

我尝试将 CSS 样式 letter-spacing 应用到 <span> 标记中的这个和弦，但显然这不能控制字距调整。

有趣的是，当我从下拉列表中选择和弦时，我的操作系统会正确呈现字距调整，但在选择之后，扁平符号会自行显示，并由空格留出，如下所示。

我要渲染的 JS 文字是，

'B\u266D'

使用文字 'B&flat;' 只会在下拉菜单中呈现为 'B&flat;'。

FWIW，我在 Vue3 中执行此操作，并在 Mac 上查看 Chrome 中的输出。

【问题讨论】：

标签： html vue.js unicode

【解决方案1】：

这似乎是 macOS（以及其他基于 Chromium 的浏览器和其他操作系统）上 Chrome 96 中的渲染问题。 macOS 上的 Firefox 91 renders it correctly。该问题也仅影响 flat (\u266d) 和 natural (\u266e) 标志。 sharp、double sharp 和 double flat 符号在我的测试中不受影响。

您可以通过将<select> 的letter-spacing 调整为负值来解决此问题（以使字符更靠近，从而减少间隙），并使用右侧的padding 补偿减小的宽度.您只想对受影响的标志有条件地执行此操作，因此请使用返回必要的 letter-spacing 和 padding 的计算道具：

在<select> 上使用v-model 来捕获选定的注释。
使用computed prop 返回调整letter-spacing 和padding 所需的样式。当所选音符包含有问题的符号时，返回调整后的间距/填充。
将计算的样式绑定到<select> 的样式。

<script setup>
const notes = [
  'B\u266d', // flat
  'B\u266e', // natural
  'B\u266f', // sharp
  'B\u{1D12B}', // double flat
  'B\u{1D12A}', // double sharp
]
1️⃣
let selectedNote = $ref(notes[0])

2️⃣
let styles = $computed(() => {
  if (selectedNote.includes('\u266d') || selectedNote.includes('\u266e')) {
    return {
      'letter-spacing': '-20px',
      'padding-right': '40px',
    }
  }
})
</script>

<template>
  <select 1️⃣ v-model="selectedNote" :style="styles" 3️⃣>
    <option v-for="note in notes">{{ note }}</option>
  </select>
</template>

注意： 上面的 <script setup> 使用新的/实验性的 Reactivity Transform，它支持全局定义的反应性 API（$ref、$computed 等）并删除了需要解开refs。

demo

在 macOS 上的 Chrome 96 上的结果：

【讨论】：