Font metric overrides
ascent-override は CSS の @font-face アットルールの記述子で、フォントのアセンダーの寸法を定義します。アセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの上の高さです。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 87 | 87 | 89 | | 87 | | |
| DOM API | ||||||
| descentOverride は FontFace インターフェイスのプロパティで、 @font-face/descent-override 記述子の値を返したり設定したりします。 使用できる値は、使用するメトリックをフォントファイルから取得することを示す normal か、パーセント値です。 | 87 | 87 | 89 | | 87 | |
| lineGapOverride は FontFace インターフェイスのプロパティで、 @font-face/line-gap-override 記述子の値を返したり設定したりします。 使用可能な値は normal で、使用するメトリックをフォントファイルから取得することを示します。 | 87 | 87 | 89 | | 87 | |
| CSS @ ルール | ||||||
| ascent-override は CSS の @font-face アットルールの記述子で、フォントのアセンダーの寸法を定義します。アセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの上の高さです。 | 87 | 87 | 89 | | 87 | |
| descent-override は CSS の @font-face アットルールの記述子で、フォントのディセンダーの寸法を定義します。ディセンダーの寸法は CSS がインライン整形コンテキストで行ボックスをレイアウトするために使用するベースラインの下の高さです。 | 87 | 87 | 89 | | 87 | |
| line-gap-override は CSS の @font-face アットルールの記述子で、そのフォントの line-gap の寸法を定義します。 line-gap の寸法は、フォントが推奨する line-gap または external leading です。 | 87 | 87 | 89 | | 87 | |
基本構文
@font-face {
font-family: "Adjusted Fallback";
src: local("Arial");
ascent-override: 90%;
descent-override: 22%;
line-gap-override: 0%;
}ライブデモ
実務での使いどころ
-
フォント読み込み時のレイアウトずれ防止
フォールバックフォントのメトリクスをWebフォントに合わせて調整し、フォント切替時のCLSを最小限に抑えます。
注意点
- Safariでは未対応のため、size-adjustプロパティとの併用やフォント読み込み戦略での対策も検討してください。
アクセシビリティ
- フォントメトリクスの調整はテキストの行間に影響するため、十分な行間隔が維持されていることを確認してください。