ウェブフォントが読み込まれると、多くの場合、異なるサイズの代替フォントが置き換えられます。これは、両方が同じ font-size に設定されている場合でも同様です。これにより「レイアウト シフト」（Cumulative Layout Shift）が発生し、フォールバックの小文字（x-height）が優先フォントと大きく異なる場合、テキストが読みにくくなる可能性があります。
font-size-adjust プロパティは、特定の指標（通常は x-height）に基づいてフォントのサイズを正規化することで、この問題を解決します。これにより、現在アクティブなフォントに関係なく、テキストが同じ視覚的スペースを占めるようになります。
実装の手順
1. 好みのフォントのアスペクト比を特定する
フォールバックを正規化するには、プライマリ フォントの「アスペクト値」（小文字とフォントサイズの比率）が必要です。
- 自動検出（推奨）:
from-fontキーワードを使用して、ブラウザがメインのウェブフォントから比率を抽出できるようにします。 - 手動計算: 特定の値（Verdana の場合は 0.545 など）がわかっている場合は、その値を直接指定して、より正確に制御できます。
2. テキスト コンテナに font-size-adjust を適用する
このプロパティを要素または親コンテナに適用します。これにより、メインフォントの読み込みに失敗した場合や、読み込み中の場合に、代替フォントがメインフォントの視覚的なサイズに合わせてスケーリングされます。
.text-content {
/* Define your font stack as usual */
font-family: "MyWebFont", "Arial", sans-serif;
font-size: 1rem;
/* MANDATORY: Normalize the font size based on the primary font's x-height.
This ensures that if 'Arial' is used as a fallback, it is scaled
to match the x-height of 'MyWebFont'. */
font-size-adjust: from-font;
}
3. （省略可）特定の指標を調整する
x-height がデフォルトで最も一般的ですが、cap-height（オール キャップスのヘッダーに便利）や ch-width（等幅フォントに便利）などの他の指標で正規化することもできます。
h1 {
/* Normalize based on the height of capital letters */
font-size-adjust: cap-height from-font;
}
4. 視覚的な安定性を確認する
font-size-adjust の値がフォールバックと正しく一致していることを確認します。これをテストするには、ウェブフォントを一時的にブロックするか、ブラウザの DevTools で font-family 宣言を調整して、テキスト レイアウトが安定していることを確認します。
代替戦略
font-size-adjust をサポートしていないブラウザでは、フォントはデフォルトのスケールでレンダリングされます。これにより、フォントの入れ替え中にレイアウトがずれたり、読みやすさが変化したりする可能性があります。
font-size-adjust を使用せずにこの問題を軽減するには、@font-face 記述子の size-adjust、ascent-override、descent-override を使用して、代替フォントを手動で調整します。ただし、これらの記述子は、単一の font-size-adjust 値よりも計算が複雑になります。