font-size-adjust

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 のテキスト (非表示テキスト) になります。

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;
}

結果

• font-size
• font-weight
• 基本的なテキストとフォントの装飾