フォント

font-size-adjust

font-size-adjust は、フォントが変わっても文字が同じくらいの大きさに見えるように、小文字の高さなどの寸法をそろえて文字の大きさを調整します。代わりのフォントで表示されたときに、文字が急に小さく見えるのを防げます。

構文

none | [ ex-height | cap-height | ch-width | ic-width | ic-height ]? [ from-font | <number [0,∞]> ]

Ax Ax

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  font-size-adjust: 0.5;
}

Ax Ax

none：初期値です。調整しません。同じ font-size でも、フォントによって小文字の高さが違って見えます。
0.5 などの数値：そろえる寸法（初期値は小文字の x の高さ）が font-size のその割合になるように、フォントごとに文字の大きさを変えます。0.5 なら、font-size: 64px で x の高さが 32px になります。
from-font：最初に使えるフォントのその寸法の割合を、数値の代わりに使います。最初のフォントの大きさはそのままで、ほかのフォントがその寸法にそろいます。

数値や from-font の前には、そろえる寸法を書けます。省くと ex-height です。

プレビューでは、箱のフォント（ゴシック体）の「Ax」と、明朝体（Times New Roman などのセリフ体）の「Ax」を並べています。none では同じ font-size でも明朝体の x が低く、0.5 にすると両方の x が同じ高さにそろいます。

指定したフォントが無い環境や、Web フォントを読み込んでいる間に出る代わりのフォントの見た目の大きさを、指定したフォントに近づけたいときに使います。

継承するプロパティなので、箱に書くと中のすべての文字に効きます。数値を書くと最初のフォントの文字も大きさが変わり、font-size に書いた大きさどおりではなくなります。最初のフォントをそのままにしたいときは from-font にします。
Web フォントがまだ読み込まれていない間は、代わりのフォントが「最初に使えるフォント」になるので、from-font はそのフォントの割合を使います。
ここで選べる書き方は、Chrome・Edge 127、Firefox 118、Safari 17 からすべて使えます。