ウェブフォントが読み込まれる際にスケールを調整して、ドキュメントのフォントサイズを標準化し、フォント間の切り替えによるレイアウトのずれを防ぐことができるようになりました
次の点を考慮してください。
デモ
ここで、font-size
は一貫した 64px
であり、これらの各ヘッダーの唯一の違いは font-family
です。左側の例は変更されておらず、
最終的なサイズが不整合になります右側の例では、size-adjust
を使用して、64px
が最終的なサイズで一貫するようにしています。
この記事では、size-adjust
という新しい CSS フォント フェイス記述子について説明します。また、フォントサイズの修正と正規化を行う方法もいくつか示します。
よりスムーズなユーザー エクスペリエンス、一貫性のあるデザイン システム、予測可能性の向上を実現
できます。重要なユースケースの一つは、ウェブフォント レンダリングを最適化して累積レイアウト シフト(CLS)を防ぐことです。
問題空間のインタラクティブなデモをご覧ください。プルダウンで書体を変更して、次のことを確認します。
- 結果の高さの差。
- 視覚的に不快なコンテンツの切り替え。
- インタラクティブなターゲット エリアの移動(プルダウンが移動します)。
size-adjust
でフォントをスケーリングする方法
構文の概要:
@font-face {
font-family: "Adjusted Typeface";
size-adjust: 150%;
src: url(some/path/to/typeface.woff2) format('woff2');
}
Adjusted Typeface
という名前のカスタム書体を作成します。size-adjust
を使用して、各グリフをデフォルトのサイズの 150% に拡大します。- インポートされた 1 つの書体にのみ影響します。
上記のカスタム書体は次のように使用します。
h1 {
font-family: "Adjusted Typeface";
}
シームレスなフォント スワップによる CLS の軽減
次の GIF で、左側の例を見て、フォントが変更されたときにどのように変化するかを確認してください。これは広告見出しが 1 つだけの小さな例です。 問題は顕著です
フォント レンダリングを改善するには、フォント スワッピングが効果的です。読み込みが速いシステムフォントをレンダリングしてコンテンツを最初に表示し、Web フォントが読み込みを完了したら、そのシステムフォントを Web フォントと入れ替えます。これにより、両方の長所を活かすことができます。 コンテンツを可能な限り早く表示して、ページにコンテンツを ユーザーの時間を犠牲にすることただし 問題は ウェブフォントが読み込まれると、ページ全体が移動します。これは、特定の位置に表示されるため、 若干異なる可能性があります。
@font-face
ルールに size-adjust
を配置すると、フォントフェイスのグローバルなグリフ調整が設定されます。適切なタイミングにすると、表示が最小限で済みます
シームレスなスワップですシームレスなスワップを作成するには、手で調整するか、こちらをお試しください
サイズ調整
電卓
(Malte Ubl)
この投稿の冒頭で、フォントサイズの問題の修正は試行錯誤によって行われました。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: リモート ターゲット
ローカルで利用可能なフォントを調整して、リモート 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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
対応ブラウザ
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
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 機能は、ウェブレイアウトのテキスト バウンディング ボックスをカスタマイズしてフォント スワップ エクスペリエンスを改善し、ユーザーのレイアウト シフトを回避する優れた方法です。詳しくは、以下のリソースをご覧ください。
- CSS Fonts Level 5 仕様
- MDN でのサイズ調整
- シームレスな @font-face の入れ替えを生成するツール
- web.dev の Cumulative Layout Shift(CLS)
- フォント読み込みの影響を軽減する新しい方法: CSS フォント記述子
写真提供: Kristian Strand(Unsplash)