CSS3 Pre-Reference



font-size-adjust

フォントサイズ微調整

試す



コード

#containe span {
    font-size-adjust: none;
}

サンプル

※サポートしていないブラウザでは動作しません。サポートされていない単位(vw、vhなど)でも動作しません。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

コメントする


対応ブラウザ

Firefox
3.0~
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

<数値> | none | inherit
初期値 none
適用 すべての要素
継承 する
レベル 2
%の解釈 -
適用メディア Visual
参考文献 CSS Fonts Module Level 3#3.7 Relative sizing: the ‘font-size-adjust’ property

解説

フォントサイズを微調整します。

このプロパティはCSS3になって新しくなった部分は特にありません。

各フォントは、大きさの値として、フォントサイズのほかに、x-heightという値を有します。この値は小文字'x'の高さを示すもので、最終的な小文字の大きさは、この値に左右されます。

故に、同じフォントサイズでも、小文字のサイズはフォントごとにバラバラで、大き過ぎたり、かたや小さ過ぎて読み辛くなったりします。このプロパティは、そういった不具合を解消する為に導入されました。このプロパティを用いれば、フォントのx-heightを、代替フォントも含めたすべてのフォントで維持し続ける事が出来ます。
このプロパティでは、縦幅比(aspect value)、つまり'x-height'の値をフォントサイズで割った値を使用します。

各フォントは、大きさの値として、フォントサイズのほかに、x-heightという値を有します。この値は小文字'x'の高さを示すもので、最終的な小文字の大きさは、この値に左右されます。

故に、同じフォントサイズでも、小文字のサイズはフォントごとにバラバラで、大き過ぎたり、かたや小さ過ぎて読み辛くなったりします。このプロパティは、そういった不具合を解消する為に導入されました。このプロパティを用いれば、フォントのx-heightを、代替フォントも含めたすべてのフォントで維持し続ける事が出来ます。

このプロパティでは、縦幅比(aspect value)、つまり'x-height'の値をフォントサイズで割った値を使用します。

選択対象となるフォントごとに、以下の公式に従って拡大・縮小率を計算します。

y(a/a') = c

  • y = 当該要素の”font-size”の値
  • a = ”font-size-adjust”の値
  • a' = 現在選択中のフォントの縦幅比
  • c = 現在選択中のフォントの小文字に適用すべき”font-size”の値

例えば、14pxのVerdana(縦幅比0.58)を使いたかったのにそれは利用不可能で、代わりに縦幅比0.46の代替フォントが利用可能だとしましょう。このプロパティに 0.58 という値を指定しておけば、上の公式より、代替フォントの小文字のフォントサイズは14 x (0.58/0.46) = 17.65pxにすれば良い事になります。

トラックバック

投稿されたコメント