【CSS Modules】descent-overrideアットルール記述子の使い方

descent-overrideプロパティは、CSSの@font-faceルール内でカスタムフォントのディセント値を上書きするための値を保持するプロパティです。このプロパティは、Webフォントの垂直方向のメトリクスを調整し、特にフォントのベースラインが他のフォントと揃わない場合に、レイアウトの不整合を改善する目的で使用されます。

フォントのディセント値とは、文字のベースラインから、gやpのような文字の下部に突き出す部分（ディセンダー）の最も低い点までの距離を指します。異なるフォントファミリーを組み合わせた際に、ディセント値の違いによりテキストの垂直方向の位置がずれたり、行の高さに意図しない余白が生じたりすることがあります。

descent-overrideプロパティにパーセンテージ値を指定することで、フォントが持つ本来のディセント値を指定した割合で調整できます。例えば、descent-override: 100%;と指定すれば元のディセント値がそのまま適用され、descent-override: 80%;と指定すれば元の値の80%に縮小されます。これにより、フォントの表示が改善され、異なるフォント間での垂直方向の配置の一貫性を保つことが可能になります。結果として、テキストの行の高さや隣接する要素との垂直方向の配置がより予測可能になり、Webページの視覚的な品質と読みやすさを向上させることができます。特に、カスタムフォントを使用する際に、ブラウザによるフォントレンダリングの差異を吸収し、より制御されたテキスト表示を実現するために重要な役割を果たします。

Copy
1@font-face {
2  font-family: "CustomFont";
3  src: url("custom-font.woff2") format("woff2");
4  descent-override: 20%;
5}

引数なし

引数はありません

戻り値なし

戻り値はありません