【CSS Modules】line-gap-overrideアットルール記述子の使い方
line-gap-overrideアットルール記述子の使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
line-gap-overrideプロパティは、CSSの@font-faceルール内で、カスタムフォントの行間（line gap）を上書きするための設定値を保持するプロパティです。
このプロパティは、Webサイトで使用するWebフォントなどのカスタムフォントにおいて、そのフォントが持つ本来の行間の値を調整するために利用されます。Webページでは、デザインの一貫性を保つために複数のフォントを組み合わせたり、フォントの読み込み失敗に備えて代替フォントを指定したりすることが一般的です。しかし、フォントごとに内部で定義されている行間の値は異なる場合があり、これによりフォントが切り替わった際にテキストの行の高さが予期せず変動し、レイアウトが不安定になる問題が発生することがあります。
line-gap-overrideプロパティを使用すると、指定したフォントの行間メトリックを任意の数値で上書きすることができます。この数値は、フォントのemボックス（文字の高さの基準となる仮想のボックス）に対する比率として解釈され、実際の行の高さを決定します。
この機能を通じて、Webフォントの読み込み状況や、ユーザーの環境によって使用されるフォントが変化した場合でも、常に統一された行の高さと安定したテキストレイアウトを維持することが可能になります。これにより、ユーザーはより快適にコンテンツを閲覧でき、開発者は視覚的に一貫性のある高品質なユーザーインターフェースを提供できるようになります。
公式リファレンス: line-gap-override
構文(syntax)
1@font-face { 2 line-gap-override: normal; /* または <percentage> | <number> */ 3}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません