font-size-adjust
font-size-adjust は CSS のプロパティで、全体の font-size を定義する大文字のサイズに対する小文字のサイズを変更する方法を提供します。このプロパティは、フォントの代替が起こりうる状況で有益なものです。
最初に選んだ font-family が使用できず、その代替フォントのアスペクト値（小文字の高さをフォントサイズで割った値）が大きく異なる場合、読みやすさが課題になることがあります。フォントの読みやすさは、特に小さなサイズのフォントでは、大文字の大きさよりも小文字の大きさによって決まります。 font-size-adjust プロパティは、代替フォントのフォントサイズを調整してフォント間のアスペクト値を一定に保ち、使用するフォントに関係なくテキストが同じように現れることを保証するのに役立ちます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 127 | 127 | 3 | 16.4 | 127 | 16.4 | |
| CSS @ ルール | ||||||
| size-adjust は CSS の @font-face アットルールの記述子で、このフォントに関連する字体のアウトラインとメトリックの乗数を定義します。これにより、同じフォントサイズでレンダリングしたときに、様々なフォントのデザインを調和させることが容易になります。 | 92 | 92 | 92 | 17 | 92 | 17 |
| CSS プロパティ | ||||||
from-font | 127 | 127 | 118 | 17 | 127 | 17 |
none | 127 | 127 | 3 | 16.4 | 127 | 16.4 |
two-values 2 つの値の構文 | 127 | 127 | 92 | 17 | 127 | 17 |
| その他 | ||||||
| font-size-adjust 属性を使用すると、作成者は、代替フォントで最初に選択したフォントの X 高さを保持する要素のアスペクト値を指定できます。 | 127 | 127 | 3 | 16.4 | 127 | 16.4 |
注釈 4件
実装メモ
- Firefox 40 より前では、「font-size-adjust: 0」は「font-size-adjust: none」として誤って解釈されていました (バグ 1144885)。
- Windowsのみ対応。
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (3)
注釈 4件
実装メモ
- Firefox 40 より前では、「font-size-adjust: 0」は「font-size-adjust: none」として誤って解釈されていました (バグ 1144885)。
- Windowsのみ対応。
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (3)
基本構文
CSS
body {
font-family: "Ideal Sans", Verdana, sans-serif;
font-size-adjust: 0.5;
}
/* Use a specific metric as a reference */
.adjusted {
font-size-adjust: ex-height 0.48;
}ライブデモ
実務での使いどころ
-
フォントフォールバック時の一貫性
Web フォントが読み込まれない場合でも、フォールバックフォントの見た目のサイズを揃え、レイアウトシフトを防ぐ。
注意点
- 適切なアスペクト比を計算するために、使用するフォントのメトリクスを事前に調べる必要がある。
- すべてのフォントの組み合わせで完璧に揃うわけではないが、大幅な改善は期待できる。
アクセシビリティ
- フォントサイズの一貫性はテキストの可読性を向上させ、ロービジョンのユーザーにとっても有益。