公開日: 2024 年 7 月 23 日
CSS font-size-adjust プロパティが Chrome に導入され、ベースラインの新規利用可能機能の一部になりました。このプロパティを使用すると、代替フォントが読み込まれたときにレイアウトがずれるのを防ぎ、小さいフォントサイズでも代替フォントが読みやすくなるようにできます。font-size-adjust プロパティは Interop 2024 の一部であるため、これはウェブ プラットフォームの相互運用性を改善するための取り組みの成果です。
問題
同じサイズに設定された 2 つのフォントを比較すると、グリフの形状とサイズによっては、表示されるテキストの占有するスペースが大きく異なる場合があります。たとえば、次のデモでは、Verdana と Arial のテキストを 16 ピクセルに設定しています。
サイズの違いは、アスペクト値（フォントの大文字と小文字の高さの比率）がフォントによって異なることに起因しています。
異なるアスペクト値のフォントがフォールバックとして使用されると、2 つの問題が発生する可能性があります。まず、フォントによって占有されるスペースの量が変わります。2 つ目は、選択した代替フォントが、特に小さいフォントサイズでは、最初に指定したフォントよりも読みづらい場合があります。これは、小文字と大文字の相対的な高さが判読性の重要な要素であるためです。
font-size-adjust のメリット
font-size-adjust プロパティを使用すると、最初のフォントとより一致するようにフォールバック フォントを調整できます。次の例は、前述の 2 つのフォントを示しています。今回は、2 番目のフォントが 1 番目のフォントに合わせて調整されています。
font-size-adjust を使用します。この例では、単一の値（数値）を使用して、デフォルトのフォント指標 ex-height を使用してフォントを調整します。これは、x-height（フォント内の小文字 x の高さ）とフォントサイズの比率です。使用するフォントメトリックを指定することもできます。次の例では、数値に加えて ch-width キーワードを使用してフォントを正規化しています。
font-size-adjust を使用する。使用可能なすべての値については、font-size-adjust の MDN ドキュメントをご覧ください。
フォールバック フォントを使用しているサイトをチェックして、font-size-adjust で少し調整することで、フォールバック フォントを使用している読者のエクスペリエンスを改善できるかどうかを確認することをおすすめします。特に、現在はどこでも使用できるようになりました。