Font metric overrides
Webフォントとフォールバックフォント間のサイズの差異を軽減するためのフォントメトリクス調整機能です。CLS（Cumulative Layout Shift）の原因となるフォント切替時のレイアウトずれを防ぎます。ascent、descent、line-gapの各値を調整することで、フォールバックフォントをWebフォントと同じサイズ感で表示できます。
概要
Webフォントとフォールバックフォント間のサイズの差異を軽減するためのフォントメトリクス調整機能です。CLS（Cumulative Layout Shift）の原因となるフォント切替時のレイアウトずれを防ぎます。ascent、descent、line-gapの各値を調整することで、フォールバックフォントをWebフォントと同じサイズ感で表示できます。
対応ブラウザ
デスクトップ
Chrome 87+
Edge 87+
Safari 未対応
Firefox 89+
モバイル
Chrome Android 87+
Safari iOS 未対応
Firefox Android 89+
基本構文
CSS
@font-face {
font-family: "Adjusted Fallback";
src: local("Arial");
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}実務での使いどころ
-
フォント読み込み時のレイアウトずれ防止
フォールバックフォントのメトリクスをWebフォントに合わせて調整し、フォント切替時のCLSを最小限に抑えます。
注意点
- Safariでは未対応のため、size-adjustプロパティとの併用やフォント読み込み戦略での対策も検討してください。
アクセシビリティ
- フォントメトリクスの調整はテキストの行間に影響するため、十分な行間隔が維持されていることを確認してください。