12

要素を使用してpre、特殊なUnicode文字（⚡⚑▶◀⁋）を含むテキストを表示しています。ブラウザがこれらの特殊文字を通常の文字よりも広くレンダリングし、水平方向により多くのスペースを占めることに気づきました。

これはここで簡単に確認できます：https ：//gist.github.com/968b5c22cce14909cf27 両方の行は20文字ですが、最初の行は長い（画面のピクセル）ことに注意してください。

pre要素（またはモノスペースフォントが適用されている他の要素）に実際に固定された文字幅を強制する方法（CSS）はありますか？

ChromeとFirefoxをチェックしましたが、どちらも特殊文字の幅を広げています。

4

3 に答える 3

4

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

たとえば、最初の文字は少数のフォントにのみ存在します 。http：//www.fileformat.info/info/unicode/char/26a1/fontsupport.htmを参照してください （すべてのフォントをカバーしているわけではありませんが、おそらくほとんどのフォントをカバーしています。彼らのコンピュータに持っている）。

使用されている他のフォントが等幅フォントであっても、文字の前進幅が異なる場合があります。たとえば、EversonMonoの幅はDejaVuSansMonoよりもわずかに小さくなっています。モノスペースであるということは、フォント内ですべての文字が同じ前進幅を持っていることを意味します。

したがって、必要なすべての文字を含む単一のフォントを使用する必要があります。この文字のコレクションでは、上記の2つのフォントが、それらすべてを含む唯一の公的に配布されている等幅フォントである可能性があります。ユニフォントもありますが、非常に粗いデザインのビットマップフォントです。12pt以上のサイズでは許容できるように見えるかもしれません。

于 2012-02-19T20:39:22.160 に答える
3

文字を拡張しているのはブラウザではなく、フォント定義そのものです。これらすべての文字を含み、すべて同じ幅でそれらを定義する真の等幅フォントが存在するかどうかは疑問ですが、それがあなたが探しているべきものです。これがおそらく利用できない理由の詳細については、この質問を参照してください。

于 2012-02-19T18:25:03.907 に答える
2

各特殊文字の周囲に追加し、すべての要素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">▶&lt;/span><span class="specialchar">▶&lt;/span><span class="specialchar">▶&lt;/span> 123</pre>

各文字の幅は同じになります。

事前にフォーマットされた同じ幅の特殊文字

于 2020-01-31T08:58:26.260 に答える