web-dev-qa-db-ja.com

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

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

たとえば、固定幅フォントの「Courier New」に「クイックグレーフォックスが怠惰な犬を飛び越えた」という文があると、「Arial」のような可変幅フォントよりも全体的に幅が広くなります。 "。 「CourierNew」の代わりに「Arial」を使用したいのですが、文字幅を固定しています。

可変幅の例：
速い灰色のキツネが怠惰な犬を飛び越えた。

固定幅の例：

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

各例の「クイック」と「グレー」という単語では、文字が互いにどれだけ近いかに注目してください。

htmlcsstypography
19
1.21 gigawatts

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 */
}

テストケース

11
JoeJ

私が考えることができる唯一のことは、各文字をHTML要素に入れ、その要素を次の行に沿ってスタイル設定することです。

width: 8px;         /* Whatever fixed width you want here */
display: block;     /* Force the width to be respected. See also: inline-block */
float: left;        /* So it won't be 1-per-line. Not needed for inline-block */
text-align: center; /* So the character appears in the middle of the block */

私はFlexに精通していませんが、このアプローチを実装する場合は、すべての要素を生成するJavascriptをまとめます。

2
Ashley Ross

プロポーショナルフォントはそのために作られていないので、結果はくだらないはずです。

それでも、文字の周りの個々のspanでそれを達成できます： http://jsfiddle.net/rvYES/

body {
  font: normal 100%/1.5 Arial;
}

span {
  outline: 1px dotted darkred;
}
span:nth-of-type(even) {
  outline-color: blue;
}

.w-fixed span {
  display: inline-block;
  min-width: 1em;
}

何が起こっているかを確認するために視覚的な手がかり（アウトライン）を追加し、念のためwidthではなくmin-widthを使用しました。
この方法は、これらの支援技術を使用している視覚障害者や弱視の人々にとって、スクリーンリーダーでのアクセシビリティの大きな問題を引き起こします。個々のspanに入る文字は、スペル/読み上げされます
o
n
e

b
y

o
n
e

w
h
私
l
e

a

n
o
r
m
a
l

p
a
r
a
g
r
a
p
h

w
o
u
l
d

b
e

r
e
a
d

a
s

a

s
e
n
t
e
n
c
e
、

a
s

u
s
u
a
l
。

P
r
e
t
t
y

a
n
n
o
y
私
n
g

e
h
？

しゃれを意図した

1
FelipeAls

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

Google Fonts から始めて、すべてのカテゴリの選択を解除し、モノスペースのみを残します。

1
Tracker1