22

可変幅フォントを HTML の固定幅フォントのように動作させる方法はありますか?

たとえば、「The quick gray fox jumped over the lazy dog」という文を固定幅フォントの「Courier New」で表示すると、「Arial」のような可変幅フォントよりも全体的に幅が広くなります。 "。「Courier New」の代わりに「Arial」を使用したいのですが、文字の幅は固定です。

可変幅の例:
速い灰色のキツネが怠け者の犬を飛び越えました。

固定幅の例: 

速い灰色のキツネは怠け者の犬を飛び越えました

各例の「quick」と「grey」という単語の文字が互いにどれほど近いかに注目してください。

4

5 に答える 5

13

CSSだけではありません。一般的なLettering.js (jQuery が必要です) を使用spanして各文字の周りにタグを生成し、すべての文字に幅を設定することをお勧めします。

.monospace > span {
  display: inline-block; /* Enable widths */
  width: 1em;            /* Set width across all characters */
  text-align: center;    /* Even out spacing */
}

テストケース

于 2013-01-05T23:20:09.523 に答える
1

古い質問ですが、必要な機能を備えた Web フォントとして使用できる適切な固定幅フォントを探すことをお勧めします。たとえば、私は Inconsolata の大ファンです。

Google Fontsから始めて、すべてのカテゴリの選択を解除し、Monospace だけを残します。

于 2016-04-27T00:16:32.910 に答える
0

CSS の letter-spacing プロパティを使用して、必要なものを取得できる場合があります。定義上、モノスペース フォントは、セリフやサンセリフとは異なり、同じ文字幅を持ちます。文字間隔を使用するのが最善の策ですW3C リファレンス

于 2013-01-05T23:07:58.037 に答える