説明
font-size-adjust: adjust; C2 N7
アルファベットのように活字ケースが大文字と小文字の2種類存在する用字系では、フォントサイズの印象や文字の読みやすさはフォントサイズそのものの値とはあまり関係がありません。むしろ、小文字xの値(x-heightの値)や文字の縦幅比(aspect value: x-height/フォントサイズ)のほうが重要なポイントとなります。縦幅比が大きければフォントサイズが小さくても読みやすく、逆に縦幅比が小さければデフォルトの文字サイズより少し小さくなるだけで読みにくくなります。
たとえば、縦幅比0.58の一般的な「Verdana」というフォントに対し、「Times New Roman」の縦幅比は0.46です。「Times New Roman」をフォントに用いた文章中に同じフォントサイズの「Verdana」の文章を記述すると、文字が大きすぎる印象を受けるでしょう。
このプロパティは、ベースとして使用するフォントのx-heightを、ほかのフォントにも適用し、見た目の大きさの違いを調整するプロパティです。
*1 CSS2.1仕様書において、「font-size-adjustプロパティ」は削除されました。
たとえば、縦幅比0.58の一般的な「Verdana」というフォントに対し、「Times New Roman」の縦幅比は0.46です。「Times New Roman」をフォントに用いた文章中に同じフォントサイズの「Verdana」の文章を記述すると、文字が大きすぎる印象を受けるでしょう。
このプロパティは、ベースとして使用するフォントのx-heightを、ほかのフォントにも適用し、見た目の大きさの違いを調整するプロパティです。
*1 CSS2.1仕様書において、「font-size-adjustプロパティ」は削除されました。
使用例
h1 {font-size-adjust:0.54}
フォントサイズの調整 |
|
フォントサイズの調整のレンダリング
<style type="text/css"><!--
/* Trebuchet MS 基準 値0.53 */
.eg1 {font-family:Arial,sans-serif; font-size-adjust:0.48;} /*0.53/[値0.58]x0.53 = 0.48*/
.eg2 {font-family:'Comic Sans MS',cursive; font-size-adjust:0.52;} /*0.53/[値0.54]x0.53 = 0.52*/
.eg3 {font-family:'Trebuchet MS',sans-serif; font-size-adjust:0.53;} /*基準 [値0.53]*/
.eg4 {font-family:Georgia,serif; font-size-adjust:0.56;} /*0.53/[値0.50]x0.53 = 0.56*/
.eg5 {font-family:'Times New Roman',serif; font-size-adjust:0.61;} /*0.53/[値0.46]x0.53 = 0.61*/
.eg6 {font-family:'Gill Sans',sans-serif; font-size-adjust:0.61;} /*0.53/[値0.46]x0.53 = 0.61*/
--></style>
<div class="eg1">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg2">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg3">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg4">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg5">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg6">The quick brown fox jumps over the lazy dog.</div>
/* Trebuchet MS 基準 値0.53 */
.eg1 {font-family:Arial,sans-serif; font-size-adjust:0.48;} /*0.53/[値0.58]x0.53 = 0.48*/
.eg2 {font-family:'Comic Sans MS',cursive; font-size-adjust:0.52;} /*0.53/[値0.54]x0.53 = 0.52*/
.eg3 {font-family:'Trebuchet MS',sans-serif; font-size-adjust:0.53;} /*基準 [値0.53]*/
.eg4 {font-family:Georgia,serif; font-size-adjust:0.56;} /*0.53/[値0.50]x0.53 = 0.56*/
.eg5 {font-family:'Times New Roman',serif; font-size-adjust:0.61;} /*0.53/[値0.46]x0.53 = 0.61*/
.eg6 {font-family:'Gill Sans',sans-serif; font-size-adjust:0.61;} /*0.53/[値0.46]x0.53 = 0.61*/
--></style>
<div class="eg1">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg2">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg3">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg4">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg5">The quick brown fox jumps over the lazy dog.</div><br>
<div class="eg6">The quick brown fox jumps over the lazy dog.</div>
2009/09/01現在font-stretchプロパティをサポートしているブラウザは存在しません。
*1 CSS2.1仕様書において、「font-size-adjustプロパティ」は削除されました。
*1 CSS2.1仕様書において、「font-size-adjustプロパティ」は削除されました。
