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

Posted 2023-03-25

【中文标题】如何在具有保留字符宽度的 HTML 中使用等宽字体显示特殊的 unicode 字符

【英文标题】：How to display special unicode characters using monospace font in HTML with preserved character width

【发布时间】：2012-03-10 05:40:22

【问题描述】：

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

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

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

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

【问题讨论】：

complete, monospaced Unicode font?的可能重复

【参考方案1】：

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

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

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

因此，您需要使用包含您需要的所有字符的单一字体。对于这组字符，上述两种字体可能是唯一公开发行的包含所有字符的等宽字体。嗯，有unifont，不过是位图字体，设计很粗糙；在 12pt 或稍大的尺寸下看起来可以接受。

【参考方案2】：

扩展字符的不是浏览器，而是字体定义本身。我怀疑是否存在包含所有这些字符并以相同宽度定义它们的 true 等宽字体，但这正是您应该寻找的。请参阅this question 了解有关此功能可能不可用的更多详细信息。

【讨论】：

我希望可以告诉浏览器在字符比常规字符宽的情况下将其截断。这就是我的终端使用完全相同的字体所做的事情。这看起来不太理想，但它提供了一致的线宽。

不，浏览器不会这样做。

【参考方案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>

每个字符的宽度相同：