ほんっとにはじめての HTML5 と CSS3

今回からしばらく、フォント関連の新しいプロパティが続きます。

font-size-adjustプロパティは、どのフォントでも文字サイズが同じようになるよう調整し、小さな文字でも読みやすくするプロパティです。
adjust（アジャスト）は「調整する」と言う意味。
これは欧文フォント用のプロパティ。大文字・小文字の区別がない日本語フォントには関係ない機能です。

このプロパティは、W3C Fonts Module Level 3（勧告候補）に入っていますが、今のところ Firefox しか実装していません。（2018年4月記）

Chrome は標準では未実装ですが、フラグ（experimental Web Platform features = 実験的なWebプラットフォーム機能）を使えば 有効にできるようです。

1. font-size-adjustプロパティの値
2. font-size-adjustプロパティの使い方
   1. font-size-adjust の値の決め方

参考：
・CSS Fonts Module Level 3 | W3C Candidate Recommendation
・font-size-adjust - CSS | MDN

font-size-adjustプロパティの値

font-size-adjustプロパティの値
キーワード	none（デフォルト値）
数値	font-size の値に掛けて小文字の高さ（小文字の x の高さ = x-height ）になる数値 例えば、font-size-adjust: 0.5 なら、font-size の 0.5 の高さの x-height になる
グローバル値	font-size-adjust: inherit; 親の値を継承（コレ書かなくても継承するけど） font-size-adjust: initial; 継承した親の値を解消しデフォルト値に戻す font-size-adjust: unset; 値を解除。親から継承されてるなら inherit、継承されてないなら initial と同じ動作

値の継承	あり	適用できる要素	全部

font-size-adjustプロパティの使い方

欧文書体は、「大文字に対する小文字 x の高さ（x-height）」の比率があり、この比率をフォントのアスペクト値 と言うんだそうです。
アスペクト値が小さいフォントは、フォントサイズが小さいと読みづらくなります。

また、font-familyプロパティで復数の候補をあげていて、そのフォントどうしのアスペクト値が かなり違う時、プラウザによっては「小さいと読みづらいフォント」が選ばれる場合もあります。
そんな時、どのフォントでも「x-height」が同じになるようにフォントサイズを調整するために font-size-adjustプロパティを使います。

下のサンプルは、上は Verdana、下は Times で、どちらも font-size: 12px です。
（サンセリフとセリフを 同時に指定するなんて、あまり無いけど、アスペクト値の差が大きくてわかりやすいので例として使いました）

同じ 12px ですが、下段の Times のほうが字が小さい（細かい）ですね。

下のサンプルは、両方ともに font-size-adjust: 0.51 を指定。
対応ブラウザで見ると、フォントサイズが揃って見えます。

Firefox（Mac）で見ると、下のようになっています。

font-size: 12px に対して、x-height 6.12px（12×0.51 = 6.12）になるように、Verdanaはフォントサイズ全体が縮小、Timesは拡大しています。

ということで、font-size-adjustプロパティは font-size そのものを拡大・縮小するんですね。

サンプルのソースコードはこちら。

<div class="mihon-adjust">
  <p style="font-family:Verdana,sans-serif">
  <b>Verdana</b> (font-family: Verdana; font-size: 12px; <b>font-size-adjust: 0.51</b>;)<br>
  The 'font-size-adjust' property is...</p>
<p style="font-family:'Times New Roman',Times,serif">
  <b>Times</b> (font-family: 'Times New Roman', Times; font-size: 12px; <b>font-size-adjust: 0.51</b>;)<br>
  The 'font-size-adjust' property is...</p>
</div>
<style>
.mihon-adjust {
	color:black;
	margin:1em 0;
	border:solid 1px #ccc;
	padding:0 2em
	}
.mihon-adjust p {
	font-size-adjust: 0.51;
	font-size:12px;
	line-height:;
	margin:2em 0
	}
</style>

font-size-adjust の値の決め方

フォントをなるべく大きなサイズで並べて、font-family での優先順位が低いほうのフォントに font-size-adjust を指定して、優先順が高い方のフォントと高さが同じくらいに見える値になるまで調整します。

下は、左から Verdana、Times（font-size-adjustで調整）、Times（調整なし）で並んでいます。
font-size-adjust の値を、まずは 0.5 にし、ちょっと小さかったので 0.51 にしました。
x-height が同じになるのは 0.53 でしたが、それだと Times の大文字が大きくなりすぎたので、0.51 に決めました。

Firefox（Mac）で見ると、下のようになっています。

<div class="mihon2">
  <span style="font-family:Verdana,sans-serif">Bbx</span>
  <span style="font-family:'Times New Roman',Times,serif" class="adjust">Bbx</span>
  <span style="font-family:'Times New Roman',Times,serif">Bbx</span>
</div>
<style>
.mihon2 {
	font-size:50px;
	line-height:1.1;
	color:black;
	margin:.5em 0;
	border:solid 1px #ccc;
	padding:0 .2em}
.mihon2 .adjust {
	font-size-adjust:0.51;
	margin:0 10px}
</style>

この font-size-adjustプロパティは、CSS 2 で一度定義され、CSS 2.1 では外されて、CSS 3 で新たに定義されたんだって。今「勧告候補」の仕様に入っています。
Chrome がサポートしていないし、もしかしたら勧告時に無くなるかも？（2018年4月記）

次回予告

次回は font-synthesisプロパティを使ってみます。
フォントファミリーに「bold」「italic」が無い時、ブラウザがそれを合成していいかどうかを指定するプロパティです。

関連記事

• 【28】ボールドやイタリックを合成するか決める font-synthesis
• 【27】フォントサイズを調整する font-size-adjustプロパティ
• （ちょっとメモ）CSS3とは？ CSSのモジュールやレベルについて
• （ちょっとメモ）@font-face で Webフォントを使おう
• 【26-7】フォントをまとめて指定する fontショートハンドプロパティ
• 【26-6】line-heightプロパティで 行間（行の高さ）を指定しよう
• 【26-5】font-styleプロパティでフォントを斜体に指定しよう
• 【26-4】font-stretch で condensed などの文字幅を選択しよう
• 【26-3】font-weightでフォントのウェイト（太さ）を指定しよう
• 【26-2】font-sizeプロパティでフォントのサイズを指定しよう
• 【26-1】font-familyプロパティでフォント（書体）を指定しよう
• 【25-3】クリッピングに便利！ shape-outside と shape-margin
• 【25-2】clip-pathプロパティで SVGのパスを使って切り抜こう
• 【25-1】切り抜き（クリッピング）のための新プロパティ clip-path
• 【24】要素を切り抜き表示する clipプロパティ（非推奨ですが）