我使用pre
元素来显示一些文本,包括特殊的unicode字符(Unicode字符)。我注意到浏览器呈现这些特殊字符比常规字符更宽,在水平方向上占用更多空间。
这可以很容易地在这里看到:https://gist.github.com/968b5c22cce14909cf27两行都有20个字符,但请注意第一行较长(屏幕像素)。
有没有一种方法(CSS)可以强制pre元素(或其他应用了等宽字体的元素)具有真正固定的字符宽度?
我检查了Chrome和Firefox,它们都扩展了特殊字符的宽度。
我使用pre
元素来显示一些文本,包括特殊的unicode字符(Unicode字符)。我注意到浏览器呈现这些特殊字符比常规字符更宽,在水平方向上占用更多空间。
这可以很容易地在这里看到:https://gist.github.com/968b5c22cce14909cf27两行都有20个字符,但请注意第一行较长(屏幕像素)。
有没有一种方法(CSS)可以强制pre元素(或其他应用了等宽字体的元素)具有真正固定的字符宽度?
我检查了Chrome和Firefox,它们都扩展了特殊字符的宽度。
3条答案
按热度按时间nbnkbykc1#
原因是应用的
font-family
声明中列出的第一种字体中缺少某些字符。因此,它们将在系统中显示为其他字体,或者显示不可表示字符的指示符。例如,第一个字符只出现在少数字体中,请参阅http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm(它不包括所有字体,但包括人们可能在计算机上使用的大多数字体)。
即使使用的其他字体是等宽字体,它们也可能具有不同的字符前进宽度。例如,Everson Mono的宽度略小于DejaVu Sans Mono。等宽意味着 * 在字体中 *,所有字符都有相同的前进宽度。
因此,您需要使用包含所有所需字符的单一字体。对于这个字符集,上面提到的两种字体可能是唯一公开发布的包含它们的monospace字体。嗯,有unifont,但它是一个位图字体与非常粗糙的设计;它可能看起来可以接受12 pt大小或稍大。
1dkrff032#
不是浏览器在扩展字符,而是字体定义本身。我怀疑是否存在一种真正的等宽字体,它包含所有这些字符,并以相同的宽度定义它们,但这正是你应该寻找的。请参阅this question以了解更多关于为什么这可能不可用的详细信息。
jobtbby33#
在每个特殊字符周围添加
span
,并为所有span
元素设置固定宽度。CSS示例:
示例HTML:
每个字符的宽度相同: