視覚的に安定した混合フォント

ウェブ機能: font-size-adjust

異なるフォント ファミリーを混在させる場合（インライン コード スニペットを挿入する場合や、異なるテーマでフォント ファミリーを切り替える場合など）、「x-height」（小文字の高さ）の違いにより、一方のフォントが他方のフォントよりもはるかに小さくまたは大きく見えることがあります。これにより、読みやすさが低下したり、レイアウトがずれたりする可能性があります。

font-size-adjust プロパティを使用すると、特定のフォント指標（通常は x-height）に基づいてフォントサイズを調整することで、テキストの視覚的なサイズを正規化できます。

実装の手順

  1. 必須: ウェブフォントを使用するコンテナや、複数のフォント ファミリーが混在するブロックなど、フォントの一貫性が重要な要素に font-size-adjust を適用します。
  2. 必須: 要素に from-font キーワードを使用して、ネストされた要素のフォントサイズをメインフォントの比率に自動的に合わせます。
  3. 必須: font-size-adjust に特定のアスペクト比のオーバーライド値（font-size-adjust: 0.5 など）を使用して、ベースとなるフォントのプロポーションが異なるテーマのものである場合に、プロポーションを個別に正規化します。

例: x-height を自動的に正規化する

from-font を使用するのが最も堅牢なアプローチです。最初に使用可能なフォントから x ハイトのアスペクト比を抽出し、子要素のフォントに適用します。

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

例: 特定の x-height を指定する

調整するフォントが、サイズを基準とするフォントの子でない場合は、x ハイトを調整する値を指定します。

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

代替戦略

必須: font-size-adjust をサポートしていないブラウザでは、フォントは本来の font-size 値でレンダリングされます。この問題を軽減するには、@supports ブロックを使用して、サポートされていないブラウザに有効なフォールバック戦略を提供する必要があります。

  • @supports not (font-size-adjust: from-font) を使用して font-size-adjust のサポートを検出し、フォールバック スタイル（調整された line-height や font-size など）を提供します。
  • メインのフォントと x ハイトが類似したフォントを選択します。
  • 代替フォント ファミリーとネストされたフォント ファミリーに特定の font-size と line-height のオーバーライドを適用します。
/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}