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）を持つべきであると指定しています。

構文

/* 指定されたフォントサイズを使用 */
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 など古いブラウザでは、0 を none として扱うものがあります。

形式文法

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

ブラウザ実装状況

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

関連情報

• David Baron about font-size-adjust