CSSでフォントのベースラインと下部を調整する：descent-overrideとその他のテクニック

その中でも、"descent-override" プロパティは、フォントのベースラインと下部との間の距離を制御するために使用されます。これは、行の高さと文字配置に影響を与える重要な要素です。

"descent-override" の役割

通常、フォントのベースラインと下部との間の距離は、フォントファイルに格納されている情報に基づいて決定されます。しかし、場合によっては、このデフォルト値を変更する必要がある場合があります。

"descent-override" プロパティを使用することで、以下の状況でフォントのベースラインと下部との間の距離を調整することができます。

特定の文字をベースラインより下に下げる
特定の行の高さを設定する
異なるフォント間の垂直方向の整合性をとる

"descent-override" の値

"descent-override" プロパティは、以下の2つの値を設定できます。

パーセンテージ: フォントサイズに対する割合で距離を指定します。
"normal": フォントファイルに格納されているデフォルト値を使用します。

"descent-override" の例

以下の例は、"descent-override" プロパティを使用して、フォントのベースラインと下部との間の距離を20%増加する方法を示しています。

@font-face {
  font-family: "MyFont";
  src: url("MyFont.woff2") format("woff2"),
       url("MyFont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  descent-override: 120%;
}

注意点

"descent-override" プロパティは、すべてのブラウザで完全にサポートされているわけではありません。古いブラウザでは、このプロパティが無視される可能性があります。

また、"descent-override" プロパティを使用する場合は、フォントの他のメトリックにも影響を与える可能性があることに注意する必要があります。

"descent-override" プロパティは、CSSにおける "@font-face" ルールの重要な要素です。このプロパティを使用することで、フォントのベースラインと下部との間の距離を調整し、行の高さと文字配置を制御することができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS Font Metrics Override Example</title>
  <style>
    @font-face {
      font-family: "MyCustomFont";
      src: url("MyCustomFont.woff2") format("woff2"),
           url("MyCustomFont.woff") format("woff");
      font-style: normal;
      font-weight: 400;
    }

    body {
      font-family: Arial, MyCustomFont;
    }

    .example-text {
      font-size: 24px;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <p class="example-text">This is an example of using the descent-override property to achieve vertical consistency between two different web fonts.</p>
</body>
</html>

CSS

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2"),
       url("MyCustomFont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  descent-override: 0.6; /* Arial フォントの descent-override 値に合わせる */
}

説明

この例では、以下の処理が行われます。

"MyCustomFont" というカスタムフォントが @font-face ルールで定義されます。
body 要素の font-family プロパティに "Arial" と "MyCustomFont" が指定されます。つまり、ブラウザはこれらのフォントを順に試行します。
.example-text クラスには、フォントサイズと行高が設定されます。
"MyCustomFont" フォントの descent-override プロパティに "0.6" が設定されます。これは、"Arial" フォントのデフォルトの descent-override 値に一致するように調整された値です。

この結果、"Arial" フォントと "MyCustomFont" フォントのベースラインと下部との間の距離が一致し、2つのフォントが垂直方向に整合されます。

"descent-override" プロパティの代替方法として、以下の方法が考えられます。

行高の調整

"descent-override" プロパティの代わりに、line-height プロパティを使用して行高を調整することができます。line-height プロパティは、行内のフォントの上部と下部との間の距離を制御します。

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2"),
       url("MyCustomFont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  line-height: 1.2; /* 行高を調整 */
}

フォントサイズの調整

"descent-override" プロパティの代わりに、font-size プロパティを使用してフォントサイズを調整することができます。フォントサイズを小さくすると、ベースラインと下部との間の距離が小さくなります。

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2"),
       url("MyCustomFont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-size: 90%; /* フォントサイズを調整 */
}

font-metrics-adjust プロパティの使用

CSS Fonts 4 モジュールには、font-metrics-adjust プロパティが導入されました。このプロパティは、フォントのメトリックを調整するためのより包括的な方法を提供します。

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2"),
       url("MyCustomFont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-metrics-adjust: none; /* 調整なし */
  /* 以下に、個々のメトリックの調整プロパティを追加 */
}

ベンダープレフィックスの使用

一部のブラウザは、独自のベンダープレフィックス付きの "descent-override" プロパティをサポートしています。これらのプレフィックスを使用して、特定のブラウザでのみプロパティを適用することができます。

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2"),
       url("MyCustomFont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  -webkit-descent-override: 0.6; /* Chrome and Safari */
  -moz-descent-override: 0.6; /* Firefox */
}

注意点

上記の代替方法は、それぞれ長所と短所があります。どの方法が最適かは、状況によって異なります。

ベンダープレフィックスは、特定のブラウザでのみプロパティを適用するのに役立ちますが、コードを煩雑にする可能性があります。
font-metrics-adjust プロパティは、最も新しい方法ですが、すべてのブラウザでサポートされているわけではありません。
font-size プロパティは、シンプルな解決策ですが、フォント全体のサイズを変更してしまうため、望ましい結果が得られない場合があります。
line-height プロパティは、すべてのブラウザでサポートされていますが、"descent-override" プロパティほど精密な制御を提供しません。