我正在使用pre
element来显示一些文本,包括特殊的unicode字符(⚡⚑▶⁋)。我注意到浏览器使这些特殊字符比常规字符更宽,在水平方向上占据更多空间。
这可以在这里轻松看到:https : //gist.github.com/968b5c22cce14909cf27 这两行都有20个字符,但请注意,第一个字符较长(屏幕像素)。
有没有一种方法(CSS)来强制前置元素(或其他应用了等宽字体的元素)具有真正固定的字符宽度?
我检查了Chrome和Firefox,它们都扩展了特殊字符的宽度。
原因是font-family
所应用的声明中列出的第一个字体缺少某些字符。因此,它们将在系统中显示某些其他字体,或显示无法显示的字符的指示符。
例如,第一个字符仅出现在少数几种字体中,请参阅 http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm (该文件不涵盖所有字体,但涵盖了人们可能会使用的大多数字体在他们的计算机上)。
即使使用的其他字体是等宽字体,它们的字符前进宽度也可能不同。例如,Everson Mono的宽度略小于DejaVu Sans Mono的宽度。等宽表示仅在font中,所有字符的前进宽度相同。
因此,您将需要使用包含所需所有字符的单个字体。对于此字符集合,上述两种字体可能是唯一包含它们的所有公开发行的等宽字体。嗯,有unifont,但是它是一种位图字体,设计非常粗糙;在12pt或更大的尺寸下,它看起来可以容忍。