font-size-adjustプロパティの説明
CSSのfont-size-adjustプロパティは、現在のフォントサイズを基準に小文字の大きさを相対的に調整します。この機能が有効なのは、大文字と小文字で文字の大きさが変わる欧文フォントです。日本語専用のサイトでは、あまり見ない機能かもしれませんが、タイポグラフィにこだわる時などに活躍します。
フォントには文字を並べた時に高さの基準となる線がいくつか定義されています。その中で小文字のサイズを左右するのがx-heightという値です。この値は小文字のxの高さを基準にしたもので、最終的な小文字の大きさは、この値に左右されます。
欧文のフォントファミリーはサイズ指定が同じであっても、フォントごとに小文字のサイズはバラバラです。複数のフォントが混在するページでは可読性が下がる場合があります。このプロパティは、そういった問題を解決するために導入されました。
font-size-adjustに指定できる値
none- 文字の大きさは、
font-sizeの値だけを基準に決定されます。 ex-heightx-heightの値をフォントサイズで割って値を使って、フォントのアスペクト値を正規化します。例えば、縦幅比0.58のフォントが利用不可の時に、縦幅比0.46の代用フォントを使う場合、14 x (0.58/0.46) =17.65pxとなります。
font-size-adjustの使い方とサンプルコード
font-size-adjustプロパティの構文は以下の通りです。
/* 指定されたフォントサイズを使用 */
font-size-adjust: none;
/* 小文字のフォントサイズを既定値の半分にする */
font-size-adjust: 0.5;
/* 二つの値を指定 */
font-size-adjust: ex-height 0.5;
/* グローバル値 */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: revert;
font-size-adjust: unset;
<div class="sample-block adjust-1">
adjust-1: AbCdEfG
</div>
<div class="sample-block adjust-2">
adjust-2: AbCdEfG
</div>
<div class="sample-block adjust-3">
adjust-3: AbCdEfG
</div>
.sample-block {
font-size: 16px;
font-family: sans-serif;
padding: 1rem;
border-block-end: 1px solid #ccc;
}
.adjust-1 {
font-size-adjust: normal;
}
.adjust-2 {
font-size-adjust: 0.5;
}
.adjust-3 {
font-size-adjust: 0.3;
}