トップページ > スタイルシートリファレンス > font-size-adjust
★スタイルシートリファレンス
font-size-adjust …… フォントのサイズを調整する
広告
font-size-adjustプロパティは、フォントの種類の違いによるサイズのバラつきを調整して、テキストを読みやすくする際に使用します。
例えば、制作者が指定した第一候補フォントが存在せず、第二候補以降のフォントで表示された場合、フォントの種類とサイズの関係でテキストが読みづらくなることが起こりえます。 このような環境のユーザーを想定して、あらかじめfont-size-adjustプロパティで第一候補フォントの「フォントサイズに対する小文字xの高さ比率」を指定します。 こうすることで、第二候補以降のフォントで表示された場合にも、第一候補フォントの場合と同様のサイズで表示されて、読みづらくなることを防ぐことができます。
font-size-adjustプロパティは、CSS2.1で一旦削除されましたが、CSS3では採用されるかもしれません。
■値
- none
- フォントサイズを調整しない（初期値）
- 数値
- 「小文字xの高さ÷フォントの高さ」の数値を指定
■使用例
スタイルシート部分は外部ファイル（sample.css）に記述。
p.sample1 {font-family:Verdana;}p.sample2 {font-family:Times;}
p.sample3 {font-family:Times; font-size-adjust:0.58;}
HTMLソース
<html><head>
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p>
一番最後の「Times」の行ではfont-size-adjustの値を「Verdana」と同じ0.58で指定することで、「Verdana」と「Times」でフォントの種類が異なっても文字サイズが揃うように調整しています。
</p>
<p class="sample1">font-family:Verdana;</p>
<p class="sample2">font-family:Times;</p>
<p class="sample3">font-family:Times; font-size-adjust:0.58;</p>
</body>
</html>
↓↓↓
ブラウザ上の表示
一番最後の「Times」の行ではfont-size-adjustの値を「Verdana」と同じ0.58で指定することで、「Verdana」と「Times」でフォントの種類が異なっても文字サイズが揃うように調整しています。
font-family:Verdana;
font-family:Times;
font-family:Times; font-size-adjust:0.58;
■関連項目
font …… フォントに関する指定をまとめて行う
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size-adjust …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
font-style …… フォントをイタリック体・斜体にする
font-variant …… フォントをスモールキャップにする
font-weight …… フォントの太さを指定する
font-size-adjust …… フォントのサイズを指定する
font-family …… フォントの種類を指定する
font-size-adjust …… フォントのサイズを調整する
font-stretch …… フォントを縦長・横長にする
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる！【A8.net】
© HTMQ