【CSS Modules】ascent-overrideアットルール記述子の使い方
ascent-overrideアットルール記述子の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
ascent-overrideプロパティは、CSSの@font-faceルール内で使用され、ウェブフォントのアセントメトリクスを制御するためのプロパティです。このプロパティは、フォントのベースラインから最も高い文字の上端までの距離を指す「アセント」の値を上書きするために用いられます。
ウェブサイトにカスタムフォント（ウェブフォント）を適用する際、フォントが完全に読み込まれるまでの間は、代替のシステムフォントが表示されることがあります。このとき、ウェブフォントと代替フォントのアセント値が大きく異なると、フォントの切り替え時にテキストコンテンツの垂直方向の位置がずれ、レイアウトが予期せず変動する現象（Cumulative Layout Shift: CLS）が発生することがあります。
ascent-overrideプロパティにパーセンテージ値を指定することで、ブラウザがフォントのアセントを計算する際の基準値を調整し、ウェブフォントと代替フォントのアセントメトリクス間の差を最小限に抑えることが可能です。これにより、フォントのロード中に発生するレイアウトシフトを軽減し、ユーザーインターフェースの視覚的な安定性を向上させます。特に、パフォーマンスとユーザーエクスペリエンスが重視されるウェブアプリケーションにおいて、コンテンツの突然の移動を防ぎ、スムーズな表示を実現するために重要な役割を果たします。
公式リファレンス: ascent-override
構文(syntax)
1@font-face { 2 ascent-override: 100%; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません