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

Question

我正在使用preelement 来显示一些文本，包括特殊的 unicode 字符（⚡ ⚑ ▶ ◀ ⁋）。我注意到浏览器渲染这些特殊字符比普通字符更宽，水平占用更多空间。

这可以在这里很容易地看到：https ://gist.github.com/968b5c22cce14909cf27 两行都有 20 个字符，但请注意第一行更长（屏幕像素）。

有没有办法（CSS）强制前置元素（或其他应用等宽字体的元素）具有真正固定的字符宽度？

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

Answer 1

font-family原因是在应用的声明中列出的第一个字体中缺少某些字符。因此，它们将在系统中显示一些其他字体，或者显示一些不可表示字符的指示符。

例如，第一个字符仅出现在少数几种字体中，请参阅 http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm （它不涵盖所有字体，但大多数字体可能在他们的电脑上）。

即使使用的其他字体是等宽字体，它们也可能具有不同的字符提前宽度。例如，Everson Mono的宽度比DejaVu Sans Mono略小。等宽意味着在 font中，所有字符都具有相同的提前宽度。

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

Answer 2

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

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">▶&lt;/span><span class="specialchar">▶&lt;/span><span class="specialchar">▶&lt;/span> 123</pre>

每个字符的宽度相同：