CSSリファレンス

実践向けCSSリファレンス

フォントのサイズを調整する font-size-adjust

概要

CSSプロパティ「font-size-adjust」は、フォントのサイズを調整する際に使用します。フォントというのは、大きさの値ちして「フォントサイズ」 の他、「x-height」という値を持っています。この値は小文字の 「x」の高さを基準にしたもので、小文字の大きさはこの値に左右されます。

このプロパティに対応しているブラウザは限られているので、使用する際には確認するようにしましょう。

<p> ABC</p>
<p class="font-size-adjust"> ABC</p>
<style>
p {
  font-family: Futura;
  font-size: 30px;  
}
.font-size-adjust {
  font-size-adjust: 1.5;  
}
</style>

値の指定方法

{ font-size-adjust: 値}
説明
none初期値です。フォントの高さを揃えない
数値掛け合わせる数値を入れることができます。マイナスは指定できない

値の掛け合わせ式について

以下のような計算式によってだされた値が指定されます。

計算式 A = ( a / a’ ) s  でフォントサイズが調整される
s = font-sizeの値
a = font-size-adjustの値
a’ = そのフォントの見かけ比率
A = 調整されたフォントサイズ
※( a / a’ ) の部分が1の場合はフォントサイズは調整されません。

プロパティの種類について

「font」プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名説明
fontフォントに関する指定をまとめて行うショートハンドプロパティ
font-styleフォントのスタイルを指定する
font-variantフォントのスモールキャップ指定する
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする

使用例

<p>firefoxブラウザなどで変化がみられます</p>
<p class="font-size-adjust-1"> firefoxブラウザなどで変化がみられます</p>
<p class="font-size-adjust-2"> firefoxブラウザなどで変化がみられます</p>
<p class="font-size-adjust-3"> firefoxブラウザなどで変化がみられます</p>
<style>
p {
 font-family: Futura;
 font-size: 20px; 
}
.font-size-adjust-1 {
 font-size-adjust: 0.5; 
}
.font-size-adjust-2 {
 font-size-adjust: 1; 
}
.font-size-adjust-3 {
 font-size-adjust: 1.5; 
}
</style>

仕様書

関連CSSプロパティ

閉じる