如何在HTML中使用等宽字体显示特殊的Unicode字符并保留字符宽度

Question

我正在使用pre元素来显示一些包含特殊Unicode字符（⚡ ⚑ ▶ ◀ ⁋）的文本。 我注意到浏览器呈现这些特殊字符比常规字符更宽，水平上占用更多空间。

在此处可以轻松查看：https://gist.github.com/968b5c22cce14909cf27。 两行都有20个字符，但请注意第一行比第二行长（屏幕像素）。

是否有一种方法（CSS）可以强制pre元素（或应用了等宽字体的其他元素）具有真正的固定字符宽度？

我在Chrome和Firefox上进行了检查，它们都扩展了特殊字符的宽度。

- sickill

---

可能是完整的等宽Unicode字体？的重复问题。 - Jim Garrison

Answer 1

原因是在应用font-family声明时，第一个字体中缺少一些字符。因此，系统将使用其他字体来显示这些字符，或者显示无法表示的字符指示器。

例如，第一个字符仅存在于少数几种字体中，请参见http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm（其中未涵盖所有字体，但涵盖了大多数人可能在计算机上拥有的字体）。

即使使用的其他字体是等宽字体，它们的字符也可能具有不同的进阶宽度。例如，Everson Mono的宽度略小于DejaVu Sans Mono。等宽意味着在字体内，所有字符具有相同的进阶宽度。

因此，您需要使用包含所需所有字符的单个字体。对于这些字符的集合，上述两种字体可能是唯一公开分发的包含它们所有的等宽字体。好吧，还有unifont，但它是一种具有非常粗糙设计的位图字体；它可能在12pt大小或稍大一些的情况下看起来还可以接受。

- Jukka K. Korpela

Answer 2

并不是浏览器扩展了字符，而是字体定义本身。我怀疑不存在一个真正的等宽字体，可以包含所有这些字符并定义它们的宽度相同，但这就是你应该寻找的。请参阅此问题以获取有关为什么可能不可用的更多详细信息。

- Jim Garrison

---

我希望能够指示浏览器在字符超过正常宽度时截断该字符。这正是我的终端使用完全相同字体所做的。虽然这看起来不完美，但可以保证每行宽度一致。 - sickill

不，浏览器不会这样做。 - Jim Garrison

Answer 3

在每个特殊字符周围添加 span 标签，并为所有的 span 元素设置固定宽度。

示例 CSS：

pre .specialchar {
   display:inline-block;
   width: 8.7px;  /* Find the right value */
}

示例 HTML：

<pre>Test 123 AAA 123
Test 123 <span class="specialchar">▶</span><span class="specialchar">▶</span><span class="specialchar">▶</span> 123</pre>

每个字符宽度相同的结果：

- Avatar