font-size-adjust

概要

font-size-adjust CSS プロパティは、大文字の高さではなく小文字の高さに基いたフォントサイズの選択を指定します。これが便利なのは、特に小さなサイズのフォントの読みやすさは、大文字の高さではなく小文字の高さで決まるからです。

最初に選んだ font-family が利用できず、その代替フォントのアスペクト比(小文字のサイズとフォントのサイズの比率)が大きく異る場合に問題になります。

font-size-adjust をサポートしていないブラウザと互換性を持たせるため、font-size プロパティに掛け合わせる値として指定します。これは、このプロパティに指定した値は通常、最初に選んだフォントのアスペクト比になるということです。例えば、スタイルシートの次の指定は

font-size: 14px;  
font-size-adjust: 0.5;

実際のところ、フォントの小文字が 7px の高さ(0.5 x 14px)を持つべきであると指定しています。

初期値none
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承継承する
メディアvisual
計算値指定値
アニメーションの可否可。 の値として補完しますnumber
正規順序形式文法で定義される一意のあいまいでない順序

構文

/* 指定されたフォントサイズを使用 */
font-size-adjust: none;

/* 小文字のフォントサイズを、指定された
フォントサイズの半分にする */
font-size-adjust: 0.5;

/* グローバル値 */
font-size-adjust: inherit;
font-size-adjust: initial;
font-size-adjust: unset;

none
font-size プロパティだけを基準にフォントサイズを選びます。
<number>

font-size に掛け合わせて小文字の高さ(そのフォントの文字 x の高さ)になるような値を指定し、フォントサイズを選びます。

指定した数値は、通常は最初に選んだ font-family のアスペクト比(文字 x の高さとフォントサイズの比率)にするべきです。こうすれば、最初に選んだフォントが利用可能なら、ブラウザが font-size-adjust をサポートしているかどうかに関わらず、どのブラウザでも同じサイズで表示されます。

0 は高さが 0 のテキスト (非表示テキスト) になります。バージョン 40 より前の Firefox など古いブラウザでは、0none として扱うものがあります。

形式文法

none | <number>

HTML

<p> CSS Examples: font-size-adjust</p>
<br>
<div class="times"> This is the Times font (10px) which is hard to read in small sizes</div>
<p>
<div class="verdana"> This is the Verdana font (10px) which does much better, since it is a sans - serif font.</div>
<br>
<p> Now we 'll do an adjustment:</p>
<p>
<div class="adjtimes"> and the 10px Times, adjusted to the same aspect ratio as the Verdana. Cool, eh?</div>

CSS

.times {
    font-family: Times, serif;
    font-size: 10px;
}

.verdana {
    font-family: Verdana, sans-serif;
    font-size: 10px;
}

.adjtimes {
    font-size-adjust: 0.58;
    font-size: 10px;
}

結果

仕様

仕様書 策定状況 コメント
CSS Fonts Module Level 3
font-size-adjust の定義
勧告候補  

CSS プロパティ font-size-adjust は初め CSS 2 で定義されましたが、CSS 2.1 では外されました。CSS 3 では新たに定義されています。

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート

44.0

1.0 (1.7 or earlier)[1]
3.0 (1.9)
未サポート  未サポート  未サポート 
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
基本サポート ? 1.0 (1.9.2) ? ? ? 42.0

[1] Gecko 1.0 は、Windows のみこの機能をサポートしていました。Gecko 1.9 より、全プラットフォームでサポートしています。Gecko 40.0 より前のバージョンでは、font-size-adjust: 0font-size-adjust: none として扱うことによるバグがありました。バグ 1144885 をご覧ください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss, fscholz, Sebastianz, ethertank, sosleepy
 最終更新者: yyss,