CSS の font-size-adjust プロパティは、大文字の高さではなく小文字の高さに基いたフォントサイズの選択を指定します。これが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。
/* 指定されたフォントサイズを使用 */ font-size-adjust: none; /* 小文字のフォントサイズを、指定された フォントサイズの半分にする */ font-size-adjust: 0.5; /* グローバル値 */ font-size-adjust: inherit; font-size-adjust: initial; font-size-adjust: unset;
最初に選択した font-family が利用できず、その代替フォントのアスペクト比 (小文字の大きさとフォントの大きさの比率) が著しく異なる場合、読みやすさが問題になることがあります。
このプロパティの使い方は、 font-size-adjust に対応していないブラウザーと互換性を持たせるため、 font-size プロパティに掛け合わせる数値として指定します。つまり、このプロパティ指定された値は、ふつう最初に選択されたフォントのアスペクト比になります。例えば、次のように指定されたスタイルシートでは、
font-size: 14px; font-size-adjust: 0.5;
実際のところ、フォントの小文字が 7px の高さ (0.5 x 14px) を持つべきであると指定しています。
| 初期値 | none |
|---|---|
| 適用対象 | すべての要素。 ::first-letter and ::first-line にも適用されます。 |
| 継承 | あり |
| メディア | 視覚 |
| 計算値 | 指定値 |
| アニメーションの種類 | number |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
構文
値
nonefont-sizeプロパティだけを基準にフォントサイズを選びます。<number>-
font-sizeに掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。指定した数値は、通常は最初に選んだ
font-familyのアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーがfont-size-adjustに対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。0は高さが 0 のテキスト (非表示テキスト) になります。
形式文法
none | <number>
例
HTML
<p class="times">This text uses the Times font (10px), which is hard to read in small sizes.</p> <p class="verdana">This text uses the Verdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">This is the 10px Times, but now adjusted to the same aspect ratio as the Verdana.</p>
CSS
.times {
font-family: Times, serif;
font-size: 10px;
}
.verdana {
font-family: Verdana, sans-serif;
font-size: 10px;
}
.adjtimes {
font-family: Times, sans-serif;
font-size-adjust: 0.58;
font-size: 10px;
}
結果
仕様書
| 仕様書 | 状態 | 備考 |
|---|---|---|
| CSS Fonts Module Level 3 font-size-adjust の定義 |
勧告候補 | 初回定義 |
font-size-adjust は最初に CSS 2 で定義されましたが、 CSS 2.1 で削除されました。 CSS 3 で新たに定義し直されました。
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | ? | ? | なし | 4 | ? | ? | ? |
1. From version 43: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
2. Before Firefox 40, font-size-adjust: 0 was incorrectly interpreted as font-size-adjust: none (bug 1144885).
3. Before Firefox 3, font-size-adjust was supported on Windows only.
4. From version 30: this feature is behind the Enable experimental Web Platform features preference.