如何在保留字符寬度的 HTML 中使用等寬字體顯示特殊的 unicode 字符

Question

我正在使用pre元素來顯示一些文本，包括特殊的 unicode 字符（⚡ ⚑ ▶ ◀ ⁋）。 我注意到瀏覽器將這些特殊字符呈現得比常規字符更寬，在水平方向上占據更多空間。

在這里可以很容易地看到： https : //gist.github.com/968b5c22cce14909cf27兩行都有 20 個字符，但請注意第一行更長（屏幕像素）。

有沒有辦法（CSS）強制預元素（或其他應用等寬字體的元素）具有真正固定的字符寬度？

我檢查了 Chrome 和 Firefox，它們都擴展了特殊字符的寬度。

Answer 1

擴展字符的不是瀏覽器，而是字體定義本身。 我懷疑是否存在真正的等寬字體，包括所有這些字符並以相同的寬度定義它們，但這正是您應該尋找的。 有關為什么這可能不可用的更多詳細信息，請參閱此問題。

Answer 2

原因是正在應用的font-family聲明中列出的第一個字體中缺少某些字符。 因此，它們將在系統中顯示一些其他字體，或者顯示一些不可表示字符的指示符。

例如，第一個字符僅出現在少數字體中，請參閱http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm （它並未涵蓋所有字體，但人們可能會使用的大多數字體在他們的電腦上）。

即使使用的其他字體是等寬字體，它們也可能具有不同的字符前進寬度。 例如， Everson Mono 的寬度比DejaVu Sans Mono略小。 等寬意味着在 font 中，所有字符都具有相同的前進寬度。

因此，您需要使用包含您需要的所有字符的單一字體。 對於這個字符集，上面提到的兩種字體可能是唯一包含它們的公開發行的等寬字體。 嗯，有unifont ，但它是一種設計非常粗糙的位圖字體； 它在 12pt 或更大的尺寸下看起來可能是可以接受的。

Answer 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>

每個字符的寬度相同：