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;]
font-size-adjustに関連するCSSプロパティ
| フォント・文字色 | |
|---|---|
| color | 文字の色を指定する |
| font | フォントに関する様々な機能を一括で指定する |
| font-family | 文字フォントの種類を指定する |
| font-feature-settings | OpenTypeフォントの拡張書体の特性を制御する |
| font-kerning | フォントの文字詰め（カーニング）を制御する |
| font-language-override | 文字を表示する祭に使用する言語情報を一時的に変更する |
| font-size | 文字フォントの大きさを指定する |
| font-size-adjust | 現在のフォントサイズを基準に小文字の大きさを相対的に調整する |
| font-stretch | 表示させるフォントの幅広や幅狭のフェイスを指定する |
| font-style | フォントを筆記体や斜体で表示するかどうかを指定する |
| font-synthesis | 太字や斜体に対応していないフォントの加工を制御する |
| font-variant | フォントの表示形式やブラウザの合成規則を一括で指定する |
| font-variant-alternates | 文字フォントの代替字体（グリフ）の選定を制御する |
| font-variant-caps | 文字列に適用されるキャピタライゼーションルールを制御する |
| font-variant-east-asian | 東アジアの言語で使われる字体を制御する |
| font-variant-ligatures | 隣り合った文字フォントの合字（リガチャ）を制御する |
| font-variant-numeric | 数値に関する文字表記を制御する |
| font-variant-position | 上付き文字や下付き文字として配置されるべき字体の使用を制御する |
| font-weight | 文字フォントの太さを指定する |