@font-face に合わせて CSS のサイズ調整

ウェブフォントが読み込まれる際にスケールを調整して、ドキュメントのフォントサイズを標準化し、フォント間の切り替えによるレイアウトのずれを防ぐことができるようになりました

Adam Argyle

次の点を考慮してください。 デモ ここで、font-size は一貫した 64px であり、これらの各ヘッダーの唯一の違いは font-family です。左側の例は変更されておらず、 最終的なサイズが不整合になります右側の例では、size-adjust を使用して、64px が最終的なサイズで一貫するようにしています。

この例では、Chrome DevTools の CSS グリッド レイアウト デバッグツールを使用して高さを表示しています。

この記事では、size-adjust という新しい CSS フォント フェイス記述子について説明します。また、フォントサイズの修正と正規化を行う方法もいくつか示します。 よりスムーズなユーザー エクスペリエンス、一貫性のあるデザイン システム、予測可能性の向上を実現 できます。重要なユースケースの一つは、ウェブフォント レンダリングを最適化して累積レイアウト シフト（CLS）を防ぐことです。

対応ブラウザ

  • Chrome: 92。
  • Edge: 92。 <ph type="x-smartling-placeholder">
  • Firefox: 92.
  • Safari: 17。

ソース

問題空間のインタラクティブなデモをご覧ください。プルダウンで書体を変更して、次のことを確認します。

  1. 結果の高さの差。
  2. 視覚的に不快なコンテンツの切り替え。
  3. インタラクティブなターゲット エリアの移動（プルダウンが移動します）。

size-adjust でフォントをスケーリングする方法

構文の概要:

@font-face {
  font-family: "Adjusted Typeface";
  size-adjust: 150%;
  src: url(some/path/to/typeface.woff2) format('woff2');
}
  1. Adjusted Typeface という名前のカスタム書体を作成します。
  2. size-adjust を使用して、各グリフをデフォルトのサイズの 150% に拡大します。
  3. インポートされた 1 つの書体にのみ影響します。

上記のカスタム書体は次のように使用します。

h1 {
  font-family: "Adjusted Typeface";
}

シームレスなフォント スワップによる CLS の軽減

次の GIF で、左側の例を見て、フォントが変更されたときにどのように変化するかを確認してください。これは広告見出しが 1 つだけの小さな例です。 問題は顕著です

左の例はレイアウトがずれていますが、右の例はそうではありません。

フォント レンダリングを改善するには、フォント スワッピングが効果的です。読み込みが速いシステムフォントをレンダリングしてコンテンツを最初に表示し、Web フォントが読み込みを完了したら、そのシステムフォントを Web フォントと入れ替えます。これにより、両方の長所を活かすことができます。 コンテンツを可能な限り早く表示して、ページにコンテンツを ユーザーの時間を犠牲にすることただし 問題は ウェブフォントが読み込まれると、ページ全体が移動します。これは、特定の位置に表示されるため、 若干異なる可能性があります。

コンテンツが多いほど、フォント スワップ時のレイアウト シフトが大きくなる

@font-face ルールに size-adjust を配置すると、フォントフェイスのグローバルなグリフ調整が設定されます。適切なタイミングにすると、表示が最小限で済みます シームレスなスワップですシームレスなスワップを作成するには、手で調整するか、こちらをお試しください サイズ調整 電卓 （Malte Ubl）

Google ウェブフォントを選択すると、事前調整済みの @font-face スニペットを取得できます。

この投稿の冒頭で、フォントサイズの問題の修正は試行錯誤によって行われました。size-adjust がソースコード内で、 Cookie と Arial は Press Start 2P と同じ 64px をレンダリングしました。 2 つのフォントをターゲット フォントサイズに合わせて調整しました。

@font-face {
  font-family: 'Adjusted Arial';
  size-adjust: 86%;
  src: local(Arial);
}

@font-face {
  font-family: 'Cookie';
  size-adjust: 90.25%;
  src: url(...woff2) format('woff2');
}

フォントの調整

作成者は、フォント スケールを正規化するためのキャリブレーション ターゲットを決定します。Times、Arial、システム フォントを正規化してから、 選択できます。または、ダウンロードしたものに合わせてローカル フォントを調整することもできます。

size-adjust の調整戦略:

  1. リモート ターゲット:
    ダウンロードしたフォントに合わせてローカル フォントを調整します。
  2. ローカル ターゲット:
    ダウンロードしたフォントをローカル ターゲット フォントに合わせて調整します。

例 1: リモート ターゲット

ローカルで利用可能なフォントを調整して、リモート src カスタムフォントとサイズを合わせる次のスニペットについて考えてみましょう。リモート カスタム フォントは、 調整、ブランド フォント、

@font-face {
  font-family: "Adjusted Regular Arial For Brand";
  src: local(Arial);
  size-adjust: 90%;
}

@font-face {
  font-family: "Rad Brand";
  src: url(some/path/to/a.woff2) format('woff2');
}

html {
  font-family: "Rad Brand", "Adjusted Regular Arial For Brand";
}

この例では、ローカル フォント Arial が、読み込まれたカスタムフォントを想定して調整され、シームレスな入れ替えが行われます。

この方法には、サイズとタイポグラフィにデザイナーとデベロッパーが同じフォントを使用できるという利点があります。ブランドが調整ターゲット。これは、 大きなニュースもあります

ブランド書体をターゲットにすることでも、Malte の計算ツールの仕組みは変わりません。 Google フォントを選択すると、Arial をシームレスに調整する方法が計算されます 置き換えます。これは、 電卓、 Arial が読み込まれて「Roboto-fallback」という名前が付けられます。

@font-face {
    font-family: "Roboto-fallback";
    size-adjust: 100.06%;
    src: local("Arial");
}

完全にクロス プラットフォームの調整を作成するには、次の例をご覧ください。この例では、ブランド フォントに対応するために、調整済みのローカル フォールバック フォントを 2 つ用意しています。

@font-face {
    font-family: "Roboto-fallback-1";
    size-adjust: 100.06%;
    src: local("Arial");
}

@font-face {
    font-family: "Roboto-fallback-2";
    size-adjust: 99.94%;
    src: local("Arimo");
}

@font-face {
  font-family: "Roboto Regular";
  src: url(some/path/to/roboto.woff2) format('woff2');
}

html {
  font-family: "Roboto Regular", "Roboto-fallback-1", "Roboto-fallback-2";
}

例 2: ローカル ターゲット

次のスニペットでは、ブランドのカスタム フォントを Arial に合わせて調整しています。

@font-face {
  font-family: "Rad Brand - Adjusted For Arial";
  src: url(some/path/to/a.woff2) format('woff2');
  size-adjust: 110%;
}

html {
  font-family: "Rad Brand - Adjusted For Arial", Arial;
}

この戦略には、調整なしでレンダリングできるという利点があります。 入力フォントが調整されます

ascent-override、descent-override、line-gap-override を使用して微調整する

一般的なグリフのスケーリングではデザインや読み込みに対して十分な調整ができない場合 説明していきますので、ここで紹介する詳細な調整オプションは、 size-adjust。ascent-override、descent-override、line-gap-override プロパティは現在、Chromium 87 以降と Firefox 89 以降に実装されています。

上のハサミアイコンをクリックして、単語のオーバーライドを吹き飛ばし、特徴がトリミングできる領域を示します。

ascent-override

対応ブラウザ

  • Chrome: 87。 <ph type="x-smartling-placeholder">
  • Edge: 87。 <ph type="x-smartling-placeholder">
  • Firefox: 89。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

ascent-override 記述子は、デバイスのベースラインからの高さを定義します。 あります。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  ascent-override: 71%;
}

赤い見出し（調整前）は、大文字の A と O の上にスペースがありますが、青い見出しは、大文字の高さが全体の境界ボックスにぴったり収まるように調整されています。

descent-override

対応ブラウザ

  • Chrome: 87。 <ph type="x-smartling-placeholder">
  • Edge: 87。
  • Firefox: 89。 <ph type="x-smartling-placeholder">
  • Safari: サポートされていません。 <ph type="x-smartling-placeholder">

ソース

descent-override 記述子は、フォントのベースラインの下の高さを定義します。

@font-face {
  font-family: "Ascent Adjusted Arial Bold";
  src: local(Arial Bold);
  descent-override: 0%;
}

赤い見出し（未調整）は D と O の下にスペースがある ベースライン、青の 文字がベースラインにぴったり収まるように見出しが調整されました。

line-gap-override

対応ブラウザ

  • Chrome: 87。 <ph type="x-smartling-placeholder">
  • Edge: 87。
  • Firefox: 89。
  • Safari: サポートされていません。

ソース

line-gap-override 記述子は、フォントのラインギャップ指標を定義します。 ラインギャップまたは外部リーディングを推奨するフォントです。

@font-face {
  font-family: "Line Gap Adjusted Arial";
  src: local(Arial);
  line-gap-override: 50%;
}

赤い見出し（調整なし）には line-gap-override がなく、基本的に 0% です。一方、青い見出しは 50% 調整されているため、文字の上下にスペースが作成されています。

すべてを組み合わせる

これらのオーバーライドを使用すると、ウェブの安全なテキストの境界ボックスから余分な部分を切り取る別の方法が提供されます。テキスト ボックスは、プレゼンテーションに合わせて調整できます。

まとめ

@font-face size-adjust CSS 機能は、ウェブレイアウトのテキスト バウンディング ボックスをカスタマイズしてフォント スワップ エクスペリエンスを改善し、ユーザーのレイアウト シフトを回避する優れた方法です。詳しくは、以下のリソースをご覧ください。

写真提供: Kristian Strand（Unsplash）