【CSS Modules】ascent-overrideアットルール記述子の使い方
ascent-overrideアットルール記述子の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
ascent-overrideプロパティは、CSSの@font-faceルール内で使用され、ウェブフォントのアセントメトリクスを制御するためのプロパティです。このプロパティは、フォントのベースラインから最も高い文字の上端までの距離を指す「アセント」の値を上書きするために用いられます。
ウェブサイトにカスタムフォント（ウェブフォント）を適用する際、フォントが完全に読み込まれるまでの間は、代替のシステムフォントが表示されることがあります。このとき、ウェブフォントと代替フォントのアセント値が大きく異なると、フォントの切り替え時にテキストコンテンツの垂直方向の位置がずれ、レイアウトが予期せず変動する現象（Cumulative Layout Shift: CLS）が発生することがあります。
ascent-overrideプロパティにパーセンテージ値を指定することで、ブラウザがフォントのアセントを計算する際の基準値を調整し、ウェブフォントと代替フォントのアセントメトリクス間の差を最小限に抑えることが可能です。これにより、フォントのロード中に発生するレイアウトシフトを軽減し、ユーザーインターフェースの視覚的な安定性を向上させます。特に、パフォーマンスとユーザーエクスペリエンスが重視されるウェブアプリケーションにおいて、コンテンツの突然の移動を防ぎ、スムーズな表示を実現するために重要な役割を果たします。
構文(syntax)
1@font-face { 2 ascent-override: 100%; 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
CSS font ascent-override でレイアウトシフト軽減する
1/* 2 * ascent-overrideは、Webフォントが読み込まれる際に、 3 * そのフォントのアセント（ベースラインからフォントの最も高い部分までの距離）を 4 * 調整するために使用されます。 5 * これにより、Webフォントとシステムフォントの間でテキストの高さの急な変化を防ぎ、 6 * レイアウトシフト（Cumulative Layout Shift, CLS）を軽減するのに役立ちます。 7 */ 8@font-face { 9 font-family: 'OptimizedFont'; /* 独自のフォントファミリー名を定義します */ 10 src: url('fonts/optimized-font.woff2') format('woff2'), /* Webフォントファイルのパスを指定します */ 11 url('fonts/optimized-font.woff') format('woff'); 12 font-weight: 400; /* フォントの太さ（例: 標準） */ 13 font-style: normal; /* フォントのスタイル（例: 通常） */ 14 15 /* 16 * ascent-override: Webフォントのアセントを調整します。 17 * ここでは、デフォルトの100%から95%に調整する例です。 18 * この値は、利用するWebフォントと代替システムフォントに合わせて調整します。 19 * 目標は、Webフォントが読み込まれる前後でテキストの高さが同じになるようにすることです。 20 */ 21 ascent-override: 95%; 22} 23 24/* 25 * 定義したカスタムフォントをHTML要素に適用するCSSクラスの例です。 26 * .optimized-text クラスを持つ要素には、'OptimizedFont'が優先的に適用されます。 27 * もし'OptimizedFont'が利用できない場合は、'sans-serif'フォントが代替として使用されます。 28 */ 29.optimized-text { 30 font-family: 'OptimizedFont', sans-serif; /* カスタムフォントを適用し、代替フォントも指定 */ 31 font-size: 1.2rem; /* テキストのサイズ */ 32 line-height: 1.5; /* 行の高さ */ 33 color: #333; /* テキストの色 */ 34}
CSSのascent-overrideは、@font-faceルール内で使用されるプロパティで、Webフォントが読み込まれる際に、そのフォントのアセント（ベースラインからフォントの最も高い部分までの距離）を調整するために用いられます。このプロパティに引数はなく、特定の値を戻すこともありません。この調整は、Webフォントと代替となるシステムフォントの間でテキストの高さに急な変化が生じるのを防ぎ、結果としてWebページが読み込まれる際にコンテンツが予期せず動いてしまう「レイアウトシフト」（Cumulative Layout Shift, CLS）を軽減する重要な役割を果たします。これにより、ユーザーはより安定したページ表示を体験できるようになります。
サンプルコードでは、@font-faceルールを使用してOptimizedFontというカスタムフォントを定義し、その中でascent-override: 95%;と指定しています。これは、通常100%であるアセントを95%に調整する具体的な例です。実際に最適な値を設定するには、使用するWebフォントと代替システムフォントの実際のメトリクスを比較し、Webフォントの読み込み前後でテキストの高さが視覚的にほぼ同じになるよう調整することが求められます。定義されたOptimizedFontは、その後の.optimized-textのようなCSSクラスを通じてHTML要素に適用され、Webフォントが利用できない場合にはsans-serifのような代替フォントが使用されるよう設計されています。これにより、フォントのロード状況に関わらず、一貫したテキスト表示を実現し、Webサイトの視覚的な安定性とパフォーマンスを向上させることができます。
「ascent-override」は、Webフォントが読み込まれる際のテキストの高さの急な変化を防ぎ、レイアウトシフト（CLS）を軽減するために「@font-face」ルール内で使用します。指定するパーセンテージの値は、Webフォントと代替システムフォントの視覚的な高さを一致させる目的で、慎重に調整する必要があります。この値はフォントの種類によって最適なものが異なるため、実際に表示を確認しながら微調整を行うことが重要です。また、このプロパティは比較的新しいCSS機能のため、すべてのブラウザで完全にサポートされているわけではない点に注意が必要です。より細かくフォントの表示を調整したい場合は、「descent-override」や「line-gap-override」といった関連プロパティも合わせて利用を検討することをおすすめします。