【CSS Modules】font-size-adjustプロパティの使い方
font-size-adjustプロパティの使い方について、初心者にもわかりやすく解説します。
作成日: 更新日:
基本的な使い方
font-size-adjustプロパティは、CSSにおいて、フォントの種類が変わった際に、小文字の視覚的な大きさを一定に保つための調整値を保持するプロパティです。
通常、font-familyプロパティで複数のフォントを指定した場合、ユーザーの環境によっては最初に指定したフォントが利用できないことがあります。その際、次に指定された代替フォントが表示されますが、異なるフォントは同じfont-sizeを指定しても、小文字の高さ（特に「x」の高さであるxハイト）が大きく異なることが一般的です。この視覚的な差異は、ウェブサイト全体のレイアウトやテキストの可読性に影響を与える可能性があります。
このプロパティは、このような問題を解決するために利用されます。font-size-adjustは、フォントのxハイトとフォントサイズとの比率（アスペクト値）を基準に、代替フォントが表示される際にフォントサイズを自動的に調整します。これにより、主要なフォントが利用できない場合でも、異なるフォント間でテキストの視覚的な一貫性を保ち、読みやすさを維持することが可能になります。
具体的には、最初に指定されたフォントのアスペクト値を記憶し、代替フォントが適用される際に、そのアスペクト値に基づいてフォントサイズを再計算します。プロパティの値としては、none（調整しない）または数値を指定し、その比率に合わせて調整を行います。この機能により、開発者は多様な環境下でも、ユーザーが常に快適にテキストを読めるよう、サイトの可読性を効果的に管理できるようになります。
公式リファレンス: font-size-adjust
構文(syntax)
1font-size-adjust: 0.5;
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません