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

Copy
1/*
2 * @font-face ルールを使用してカスタムフォントを定義し、
3 * line-gap-override を使ってフォントの行間を調整する例です。
4 *
5 * line-gap-override は、フォントの組み込み行間メトリクスを上書きし、
6 * テキストの行高に影響を与えます。
7 * 値はフォントの em-box の高さに対する比率（数値）で指定します。
8 * 'normal' を指定すると、フォントのデフォルト値が使用されます。
9 */
10@font-face {
11  font-family: 'MyCustomFont'; /* カスタムフォントの名前を定義 */
12  src: url('my-custom-font.woff2') format('woff2'); /* フォントファイルのパスと形式を指定 */
13  
14  /* 
15   * line-gap-override を使用して行間を調整します。
16   * ここでは、フォントの標準行間を1.2倍に上書きしています。
17   * 例えば、このフォントが通常持つ行間が1emであった場合、実質的に1.2emの行間が適用されるように調整されます。
18   */
19  line-gap-override: 1.2; 
20}
21
22/*
23 * 定義したカスタムフォントをHTML要素に適用するセレクタの例。
24 * line-height プロパティが 'normal' または 'inherit' に設定されている場合、
25 * line-gap-override の効果が最も顕著に現れます。
26 */
27.text-with-adjusted-line-gap {
28  font-family: 'MyCustomFont', sans-serif; /* 定義したカスタムフォントを適用 */
29  font-size: 16px; /* フォントサイズ */
30  line-height: normal; /* line-gap-override の効果を適用するため、line-height は 'normal' を推奨 */
31  color: #333; /* テキストの色 */
32  padding: 10px; /* 余白 */
33  border: 1px solid #ccc; /* 境界線 */
34}

line-gap-overrideは、CSSの@font-faceルール内で使用される特別な記述子です。これは、ウェブページで使用するカスタムフォントの「行間」、より専門的には「ラインギャップ」と呼ばれるフォントの組み込み行間メトリクスを調整するために利用されます。

通常、フォントにはそれぞれが持つデフォルトの行間情報が含まれていますが、line-gap-overrideを使うことで、このフォントが持つ本来の行間情報を開発者が指定した値で上書きできます。これにより、テキストの行高に影響を与え、特定のフォントで文字の詰まり具合や行間の広がり具合を細かく調整することが可能になります。

サンプルコードでは、line-gap-override: 1.2;と指定されています。これは、フォントが持つ標準の行間（em-boxの高さに対するデフォルトの比率）を基準として、その1.2倍の行間を適用するように調整するという意味です。例えば、フォントが本来1emの行間を持つ場合、この設定により実質的に1.2emの行間が適用されるようになります。この値は数値で指定し、'normal'を指定するとフォントのデフォルト値が使用されます。

このプロパティは、特にHTML要素に適用されるline-heightプロパティがnormalまたはinheritに設定されている場合に、その効果が最も明確に現れます。カスタムフォントの視覚的なバランスを整えたり、特定のデザイン要件に合わせてテキストの読みやすさを向上させたりする際に非常に役立ちます。line-gap-override自体には引数や戻り値はありません。