font-size-adjust
Baseline 2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
font-size-adjust
は CSS のプロパティで、 (大文字の大きさを定義する) 現在のフォントサイズに相対的な小文字の大きさを設定します。
/* 指定されたフォントサイズを使用 */
font-size-adjust: none;
/* 小文字のフォントサイズを、指定された
フォントサイズの半分にする */
font-size-adjust: 0.5;
/* 2 つの値 - Level 5 仕様書で追加 */
font-size-adjust: ex-height 0.5;
/* グローバル値 */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: revert;
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
プロパティだけを基準にフォントサイズを選びます。 - ex-height | cap-height | ch-width | ic-width | ic-height
-
正規化の対象となるフォントメトリックを指定します。既定値は
ex-height
です。次のいずれかです。ex-height
-
x-height をフォントサイズで割った値を使って、フォントのアスペクト値を正規化します。
cap-height
-
フォントの cap-height を正規化し、cap-height をフォントサイズで使用します。
ch-width
-
"0" (ZERO, U+0030) の送り幅をフォントサイズで割った値を使って、フォントの横方向の狭ピッチを正規化します。
ic-width
-
"水" (CJK water ideograph, U+6C34) の送り幅をフォントサイズで割って、フォントの水平方向のワイドピッチを正規化します。
ic-height
-
フォントの垂直方向のワイドピッチを、"水" (CJK water ideograph, U+6C34) のアドバンスハイトをフォントサイズで割った値で正規化します。
<number>
-
font-size
に掛け合わせて小文字の高さ (そのフォントの文字 x の高さ) になるような値を指定し、フォントサイズを選びます。指定した数値は、通常は最初に選んだ
font-family
のアスペクト比 (文字 x の高さとフォントサイズの比率) にしてください。こうすれば、最初に選んだフォントが利用可能なら、ブラウザーがfont-size-adjust
に対応しているかどうかに関わらず、どのブラウザーでも同じサイズで表示されます。0
は高さが 0 のテキスト (非表示テキスト) になります。
公式定義
初期値 | none |
---|---|
適用対象 | すべての要素とテキスト。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
計算値 | 指定通り |
アニメーションの種類 | 数値 |
形式定義
font-size-adjust =
none |
<number [0,∞]>
例
小文字の大きさの調整
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: ex-height 0.58;
font-size: 10px;
}
結果
仕様書
Specification |
---|
CSS Fonts Module Level 5 # font-size-adjust-prop |
ブラウザーの互換性
BCD tables only load in the browser