CSSfont-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
正規順序形式文法で定義される一意のあいまいでない順序

構文

none
font-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 で新たに定義し直されました。

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 43
無効
完全対応 43
無効
無効 From version 43: this feature is behind the Enable experimental Web Platform features preference. To change preferences in Chrome, visit chrome://flags.
Edge 未対応 なしFirefox 完全対応 40
完全対応 40
完全対応 3
補足
補足 Before Firefox 40, font-size-adjust: 0 was incorrectly interpreted as font-size-adjust: none (bug 1144885).
完全対応 1
補足
補足 Before Firefox 3, font-size-adjust was supported on Windows only.
IE 未対応 なしOpera 完全対応 30
無効
完全対応 30
無効
無効 From version 30: this feature is behind the Enable experimental Web Platform features preference.
Safari 未対応 なしWebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 4Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

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

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