cman.jp > WEBページ作成TOP > CSSリファレンス > 「文字サイズの自動調節」
WEBページ作成
広告
font-size-adjust「文字サイズの自動調節」
「font-size-adjust」は、フォントの種類の違いによる見た目のサイズの調整をします。
ブラウザによって採用されるフォントは決まっています。同じフォントサイズを指定しても見た目のサイズはフォントによって相違します。いずれのフォントでも同じような見た目になるように調整します。
| CSS Ver. | 適用要素 | 継承 |
|---|---|---|
| 3.0 | 全要素 | する |
広告
font-size-adjust の指定方法
| 構文 | |
|---|---|
|
font-size-adjust : none | 数値; |
|
| プロパティ/設定値 | 意味 |
| font-size-adjust : none; | サイズの調整をしない |
| font-size-adjust : 数値; | 下記算出式で使用する a を数値で指定する。 【サイズ調整の算出式】c = ( a / b ) s s = font-sizeの値 a = font-size-adjustの値（基準となるフォントのAspect value） b = 表示に使用するフォントのAspect value c = 調整後のフォントサイズ（実際に表示されるフォントサイズ） ※Aspect value：小文字のサイズとフォントのサイズの比率 |
| デフォルト：「タグ毎のスタイル初期値」を参照 | |
font-size-adjust のサンプル
<style type="text/css">
.common div{
font-family : "メイリオ", sans-serif;
width : 290px;
border : 2px solid #6495ed;
background : #e7e7ff;
padding : 10px;
}
div.cssTitle {
margin-top : 10px;
background : #6495ed;
color : #fff;
font-weight : bold;
}
.css-adjust-056{font-size-adjust : 0.56;}
.css-adjust-046{font-size-adjust : 0.46;}
.css-adjust-none{font-size-adjust : none;}
.css-Verdana{font-family:Verdana;}
.css-Times{font-family:Times;}
.css-Arial{font-family:Arial;}
.css-font-14{font-size:14px;}
<!-- html -->
<div class="common">
<div class="cssTitle">
Verdana : Times<br><br>上段 font-size-adjust:0.56;<br>下段 font-size-adjust:none;</div>
<div>
<span class="css-font-14 css-Verdana css-adjust-056">
font-size-adjust</span> :
<span class="css-font-14 css-Times css-adjust-056">
font-size-adjust</span><br>
<span class="css-font-14 css-Verdana css-adjust-none">
font-size-adjust</span> :
<span class="css-font-14 css-Times css-adjust-none">
font-size-adjust</span><br>
</div>
<div class="cssTitle">
Verdana : Arial<br><br>上段 font-size-adjust:0.56;<br>下段 font-size-adjust:none;</div>
<div>
<span class="css-font-14 css-Verdana css-adjust-056">
font-size-adjust</span> :
<span class="css-font-14 css-Arial css-adjust-056">
font-size-adjust</span><br>
<span class="css-font-14 css-Verdana css-adjust-none">
font-size-adjust</span> :
<span class="css-font-14 css-Arial css-adjust-none">
font-size-adjust</span><br>
</div>
<div class="cssTitle">
Times : Arial<br><br>上段 font-size-adjust:0.46;<br>下段 font-size-adjust:none;</div>
<div>
<span class="css-font-14 css-Times css-adjust-046">
font-size-adjust</span> :
<span class="css-font-14 css-Arial css-adjust-046">
font-size-adjust</span><br>
<span class="css-font-14 css-Times css-adjust-none">
font-size-adjust</span> :
<span class="css-font-14 css-Arial css-adjust-none">
font-size-adjust</span><br>
</div>
</div>
下記サンプルのフォントのAspect value
Verdana : 0.56、Times : 0.46、Arial : 0.53
Verdana : Times
上段 font-size-adjust:0.56;
下段 font-size-adjust:none;
上段 font-size-adjust:0.56;
下段 font-size-adjust:none;
font-size-adjust :
font-size-adjust
font-size-adjust : font-size-adjust
font-size-adjust : font-size-adjust
Verdana : Arial
上段 font-size-adjust:0.56;
下段 font-size-adjust:none;
上段 font-size-adjust:0.56;
下段 font-size-adjust:none;
font-size-adjust :
font-size-adjust
font-size-adjust : font-size-adjust
font-size-adjust : font-size-adjust
Times : Arial
上段 font-size-adjust:0.46;
下段 font-size-adjust:none;
上段 font-size-adjust:0.46;
下段 font-size-adjust:none;
font-size-adjust :
font-size-adjust
font-size-adjust : font-size-adjust
font-size-adjust : font-size-adjust
※ほとんどのブラウザが未対応のようです。現時点（2017/03）で、Firefoxは動作確認できました。
【W3Cのfont-size-adjust仕様書】
https://www.w3.org/TR/css-fonts-3/#font-size-adjust-prop
| 関連するCSS(STYLE) | |
|---|---|
| font | 文字のデザイン |
| font-family | フォント |
| font-feature-settings | OpenTypeフォントの字形の切替え |
| font-kerning | 字間スペース |
| font-language-override | 言語を一時的に変更 |
| font-size | 文字の大きさ |
| font-stretch | フォントの形状（幅広・幅狭） |
| font-style | 斜体のスタイル |
| font-synthesis | 太字や斜体を持たないフォントの表示方法 |
| font-variant | フォントの変換ルール |
| font-variant-alternates | 代替文字の置き換え指定 |
| font-variant-caps | 英大文字での表示制御 |
| font-variant-east-asian | 漢字の表示指定 |
| font-variant-ligatures | 合字の制御指定 |
| font-variant-numeric | 数値の表示形式指定 |
| font-variant-position | 上付き文字・下付き文字の指定 |
| font-weight | 文字の太さ |
広告