概要
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>