保存された文字幅を持つHTMLでモノスペースフォントを使用して特別なユニコード文字を表示する方法

Question

私は使用しています pre 特別なユニコード文字を含むいくつかのテキストを表示する要素（⚡⚡▶◀⁋）。ブラウザは、これらの特殊文字を通常の特殊文字よりも広く、水平方向により多くのスペースを占有することに気付きました。

これはここで簡単に見ることができます： https://gist.github.com/968b5c22cce14909cf27どちらの行にも20文字がありますが、最初の文字が長いことに注意してください（画面ピクセル）。

Pre Elements（またはMonospaceフォントを適用した他の要素）を強制的に固定した文字幅を強制する方法（CSS）はありますか？

ChromeとFirefoxをチェックしましたが、どちらも特殊文字の幅を拡大しました。

Answer 1

その理由は、いくつかの文字がリストされている最初のフォントから欠落しているためです font-family 宣言が適用されています。したがって、それらはシステムに他のいくつかのフォントが表示されるか、表現できない文字の指標が表示されます。

たとえば、最初のキャラクターは一握りのフォントのみに存在します。http://www.fileformat.info/info/unicode/char/26a1/fontsupport.htm（これはすべてのフォントではなく、おそらく人々がコンピューターに持っているほとんどのフォントをカバーしています）。

使用されている他のフォントがMonospaceフォントであっても、文字の前進幅が異なる場合があります。例えば、 Everson Mono 幅がわずかに小さくなっています Dejavu Sans Mono. 。モノスペースであるということはまさにそれを意味します フォント内, 、すべての文字に同じアドバンス幅があります。

したがって、必要なすべての文字を含む単一のフォントを使用する必要があります。このキャラクターのコレクションでは、上記の2つのフォントは、おそらくそれらすべてを含む唯一の公開モノスペースフォントです。さて、あります unifont, 、しかし、それは非常に粗いデザインのビットマップフォントです。 12ptサイズで許容できるか、やや大きく見えるかもしれません。

Answer 2

文字を拡張しているのはブラウザではなく、フォント定義自体です。私は存在することを疑います 本当に これらすべての文字を含むモノスペースフォントは、同じ幅でそれらをすべて定義しますが、それはあなたが探しているべきものです。見る この質問 これがおそらく利用できない理由の詳細については。