フォントアスペクト比がウェブサイトで重要な理由
すべてのフォントに縦横比(または値)があります。 フォントのアスペクト値は、フォントの小文字のx高さをフォントサイズで割って計算されます。 この値がある場合、CSS3のfontSizeAdjustスタイルプロパティを使用して、Webサイトの表示に使用される優先フォントのアスペクト値を指定できます。
あなたの好みのフォントを持っていないコンピュータであなたのウェブサイトを見ると、fontSizeAdjustプロパティは置換フォントに最適なフォントサイズを選択するために使われます。
このプロパティは、あなたの最初の選択肢のフォントが利用できない場合でも、ページの見栄えを良くし、型を読みやすくします。
fontSizeAdjustプロパティについて
fontSizeAdjustプロパティを使用すると、必要なときにフォントの置換を制御できます。 最初の選択肢のフォントが利用できない場合、ブラウザは2番目に指定されたフォントを使用します。これにより、サイズが大きく変更されることがよくあります。 フォントの可読性は、大文字のサイズよりも小文字のサイズの影響を受けます。 ブラウザが好みのフォントのアスペクト値を知っている場合は、2番目の選択肢のフォントでページを表示するときにどのサイズを使用するのが良いかを判断することができます。
ここでは、Verdanaのアスペクト比であるアスペクト比0.58を使用してフォントサイズを調整する例を示します。 Verdanaがコンピュータ上で利用できない場合、ブラウザは置換可能なフォントのサイズを変更します。
document.getElementById( "myP")。style.fontSizeAdjust = "0.58";注:公開時点では、Mozilla FirefoxのみがfontSizeAdjustプロパティを完全にサポートしています。
共通のフォント縦横比
この表は、いくつかの一般的なフォントファミリの縦横比の計算を示しています。
フォント | アスペクト比 |
---|---|
Arial | 0.52 |
アバンギャルド | 0.45 |
ブックマン | 0.40 |
カリブリ | 0.47 |
世紀の教科書 | 0.48 |
コーチン | 0.41 |
コミックサンズ | 0.53 |
宅配便 | 0.43 |
Courier New | 0.42 |
ガラモン | 0.38 |
ジョージア州 | 0.48 |
ヘルベチカ | 0.52 |
パラチノ | 0.42 |
タホマ | 0.55 |
Times New Roman | 0.45 |
Trebuchet | 0.52 |
ヴェルダナ | 0.58 |