Question

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

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

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

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

Answer 1

浏览器不是扩展字符，而是字体定义本身。我怀疑是否存在包含所有这些字符的真正的等宽字体，并且它们都以相同的宽度定义，但这就是你应该寻找的。有关为何可能无法使用此功能的详细信息，请参阅this question。

Answer 2

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

例如，第一个字符仅出现在少数几种字体中，请参阅 http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm （它不包括所有字体，但人们可能在其计算机上拥有的大多数字体）。

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

因此，您需要使用包含所需字符的单一字体。对于这个字符集合，上述两种字体可能是唯一包含它们的公开发布的等宽字体。好吧，有unifont，但它是一个位图字体，设计非常粗糙;它看起来可以容忍12pt或更大。

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>

每个字符的宽度相同：