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

yebdmbv4  于 2023-10-21  发布在  其他
关注(0)|答案(3)|浏览(192)

我使用pre元素来显示一些文本,包括特殊的unicode字符(Unicode字符)。我注意到浏览器呈现这些特殊字符比常规字符更宽,在水平方向上占用更多空间。
这可以很容易地在这里看到:https://gist.github.com/968b5c22cce14909cf27两行都有20个字符,但请注意第一行较长(屏幕像素)。
有没有一种方法(CSS)可以强制pre元素(或其他应用了等宽字体的元素)具有真正固定的字符宽度?
我检查了Chrome和Firefox,它们都扩展了特殊字符的宽度。

nbnkbykc

nbnkbykc1#

原因是应用的font-family声明中列出的第一种字体中缺少某些字符。因此,它们将在系统中显示为其他字体,或者显示不可表示字符的指示符。
例如,第一个字符只出现在少数字体中,请参阅http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm(它不包括所有字体,但包括人们可能在计算机上使用的大多数字体)。
即使使用的其他字体是等宽字体,它们也可能具有不同的字符前进宽度。例如,Everson Mono的宽度略小于DejaVu Sans Mono。等宽意味着 * 在字体中 *,所有字符都有相同的前进宽度。
因此,您需要使用包含所有所需字符的单一字体。对于这个字符集,上面提到的两种字体可能是唯一公开发布的包含它们的monospace字体。嗯,有unifont,但它是一个位图字体与非常粗糙的设计;它可能看起来可以接受12 pt大小或稍大。

1dkrff03

1dkrff032#

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

jobtbby3

jobtbby33#

在每个特殊字符周围添加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>

每个字符的宽度相同:

相关问题