font-size-adjust：現在のフォントサイズを基準に小文字の大きさを相対的に調整する
| 初期値 | none |
| 適用対象 | 全ての要素、::first-letterおよび::first-line |
| 継承 | する |
| アニメーション | <number>値 |
| 対応ブラウザ | caniuseで確認 |
font-size-adjustプロパティの説明
font-size-adjustは、現在のフォントサイズを基準に小文字の大きさを相対的に調整します。この機能が有効なのは、大文字と小文字で文字の大きさが変わる欧文フォントです。日本語専用のサイトでは、あまり見ない機能かもしれませんが、タイポグラフィにこだわる時などに活躍します。
フォントには文字を並べた時に高さの基準となる線がいくつか定義されています。その中で小文字のサイズを左右するのがx-heightという値です。この値は小文字のxの高さを基準にしたもので、最終的な小文字の大きさは、この値に左右されます。
欧文のフォントファミリーはサイズ指定が同じであっても、フォントごとに小文字のサイズはバラバラです。複数のフォントが混在するページでは可読性が下がる場合があります。このプロパティは、そういった問題を解決するために導入されました。
font-size-adjustに指定できる値
- none
- 文字の大きさは、
font-sizeの値だけを基準に決定されます。 - ex-height
x-heightの値をフォントサイズで割って値を使って、フォントのアスペクト値を正規化します。
font-size-adjustに与えられる値
- font-size-adjust: none;
- フォントのx-heightを維持しません。フォントごとの小文字の大きさは各フォントの『x-height』に依存します。
- font-size-adjust: 数値;
-
このプロパティでは、『x-height』の値をフォントサイズで割った値を使用します（縦幅比）。[y(a/a') = c]
y = 当該要素の font-sizeプロパティの値
a = font-size-adjustプロパティの値
a' = 現在選択中のフォントの縦幅比
c = 現在選択中のフォントの小文字に適用すべき font-sizeプロパティの値
例：縦幅比0.58のフォントが利用不可の時に、縦幅比0.46の代用フォントを使う場合。 14 x (0.58/0.46) = 17.65px
font-size-adjustの使用サンプル
CSS
.font_sample01 {
font-family: 'Verdana','Times New Roman';
font-size: 14px;
font-size-adjust: normal;
}
.font_sample02 {
font-family: 'Verdana','Times New Roman';
font-size: 14px;
font-size-adjust: .58px;
}
XHTML
<div class="font_sample01">
font-size-adjust表示サンプル<br />
font_sample01 [font-size-adjust:normal;]</div>
<div class="font_sample02">
font-size-adjust表示サンプル<br />
font_sample02 [font-size-adjust:.58px;]</div>
表示確認
font-size-adjust表示サンプル
font_sample01 [font-size-adjust:normal;]
font_sample01 [font-size-adjust:normal;]
font-size-adjust表示サンプル
font_sample02 [font-size-adjust:.58px;]
font_sample02 [font-size-adjust:.58px;]