| 属性名 | font-size-adjust |
|---|---|
| 値 | <number> | none |
| 初期値 | none |
| 適用可能要素 | すべての要素 |
| 継承 | 継承する |
| サポート | https://caniuse.com/font-size-adjust |
フォントの x-height を一定に保つために使用します。
※ 本書の説明は Windows 11 での表示で説明しています。Mac, iPhone, Android など他の OS のフォントでは説明と見栄え(文字の大きさ)がマッチしないことがあります。
同じフォントサイズでも表示されるフォントによって、見かけ上のフォントの大きさが異なることがあります。これは、フォントサイズが同じでも、フォントサイズに対する文字 x の高さ(x-height)の割合(アスペクト比)が異なるためです。下記は、同じ 32pt のフォントですが、前者(Arialフォント) よりも後者(Timesフォント)の方がアスペクト比が小さいため文字が小さく見えます。
font や font-family で第一候補を Times, 第二候補を Arial としている場合、Times がみつからず、代替フォントとして Times を表示した場合、期待していたよりも小さなフォントで表示されてしまいます。この問題を解消するため、フォントの大きさではなく、フォントの x-height の高さを均一に調整するのが font-size-adjust の役目です。
1行目はアジャスト調整していない場合で Time フォントが小さく見えてしまいます。2行目はアジャスト調整した場合で Time フォントでもおおむね同じくらいの大きさに見えます。font-size-adjust には font-family で指定した最初の候補フォントのアスペクト比を指定します。
.my-no-adjust {
font-size: 32pt;
}
.my-adjust {
font-size: 32pt;
font-size-adjust: 0.52;
}
.my-arial {
font-family: Arial;
}
.my-times {
font-family: Times;
}
<div class="my-no-adjust"> <span class="my-arial">x-name</span> <span class="my-times">x-name</span> </div> <div class="my-adjust"> <span class="my-arial">x-name</span> <span class="my-times">x-name</span> </div>
フォントのアスペクト比を調べるには、font-size-adjust を指定しない場合のフォントの大きさと同じサイズになるように font-size-adjust の値を調整します。下記の Arial フォントの場合、0.50 だと小さすぎ、0.54 だと大きすぎ、0.52 だと指定しない場合のサイズと同じ大きさになるので、Arial フォントのアスペクト比はおおよそ 0.52 だということが分かります。