温馨提示:本文翻译自stackoverflow.com,查看原文请点击:css - How to display special unicode characters using monospace font in HTML with preserved character widt
css html fonts pre monospace

css - 如何使用保留字符widt的HTML使用等宽字体显示特殊的unicode字符

发布于 2020-03-27 16:06:40

我正在使用preelement来显示一些文本,包括特殊的unicode字符(⚡⚑▶⁋)。我注意到浏览器使这些特殊字符比常规字符更宽,在水平方向上占据更多空间。

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

有没有一种方法(CSS)来强制前置元素(或其他应用了等宽字体的元素)具有真正固定的字符宽度?

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

查看更多

查看更多

提问者
sickill
被浏览
79
Jukka K. Korpela 2012-02-20 04:39

原因是font-family所应用声明中列出的第一个字体缺少某些字符因此,它们将在系统中显示某些其他字体,或显示无法显示的字符的指示符。

例如,第一个字符仅出现在少数几种字体中,请参阅 http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm (该文件不涵盖所有字体,但涵盖了人们可能会使用的大多数字体在他们的计算机上)。

即使使用的其他字体是等宽字体,它们的字符前进宽度也可能不同。例如,Everson Mono的宽度略小于DejaVu Sans Mono的宽度等宽表示仅在font中,所有字符的前进宽度相同。

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