font-size-adjust
font-size-adjust
は CSS のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。
/* 指定されたフォントサイズを使用 */
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) を持つべきであると指定しています。これは、 font-size-adjust
に対応していないブラウザーでは 14px
のフォントが使用されている場合でも、妥当な結果が得られます。
構文
値
none
font-size
プロパティだけを基準にフォントサイズを選びます。<number>
-
font-size
に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。指定した数値は、通常は最初に選んだ
font-family
のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーがfont-size-adjust
に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。0
は高さが 0 のテキスト (非表示テキスト) になります。
公式定義
初期値 | none |
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 数値 |
形式文法
例
小文字の大きさの調整
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, 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 で新たに定義し直されました。
ブラウザーの互換性
BCD tables only load in the browser