先日、（7 月 24 日、25 日） に Google Chrome、および、Microsoft Edge の最新版である 「127」 が正式リリースされました。
Chrome、および Edge の 127 では、CSS の font-size-adjust プロパティが正式にサポートされ、すでにサポート済みだった Safari、Firefox と並んで、主要ブラウザにおける、font-size-adjust プロパティのサポートについて、足並みがそろった状態になりましたので、簡単にですが、このプロパティについて紹介します。
font-size-adjust プロパティとは
まず、font-size-adjust プロパティの現時点における最新の仕様は下記。
仕様書からこの CSS プロパティがどういう意味を持つのかを引用します。
For any given font size, the apparent size and effective legibility of text varies across fonts as a function of their design. For example, for bicameral scripts such as Latin or Cyrillic that distinguish between upper and lowercase letters, the relative height of lowercase letters compared to their uppercase counterparts is a determining factor of legibility. In situations where font fallback occurs, fallback fonts might not share the same ratios as the desired font family for key typographic metrics, and will thus appear to be a different size and possibly be less readable.
The font-size-adjust property provides a way to preserve the readability and apparent size of text when font fallback occurs. It does this by adjusting the used font size so that the specified metric is the same regardless of the font used.
2.4. Relative sizing: the font-size-adjust property - CSS Fonts Module Level 5 より引用
重要な部分だけ日本語にすると、要するに下記のような感じです （直訳ではなく私の方で補足しています）。
- フォントサイズに関わらず、テキストの大きさや読みやすさはフォントによって異なる。
- 例えば大文字と小文字を区別するフォントにおいては、大文字に対する小文字の、相対的な高さ（比率）が読みやすさを決める。
- （
font-familyプロパティで複数のフォントが指定されていて）フォントのフォールバックが発生した場合、優先フォントと、フォールバックされた代替フォントとの間で上記の比率が異なることで、結果として読みやすさが損なわれるかもしれない。 font-size-adjustプロパティは、フォントのフォールバックが発生したときでも、テキストの読みやすさや、見た目上のサイズを維持する方法を提供する。
font-size-adjust プロパティの値
font-size-adjust プロパティに指定できる値は下記の通り （CSS Fonts Module Level 5 で指定できる値が増え、かつ複数の値が指定できるようになっています）。
none （調整を行わない） もしくは、下記の、どのフォント・メトリックを使用して計算するかを決めるキーワード （0 個以上、指定されなかった場合は ex-height が既定値） と
ex-heightx-height（小文字 「x」 の高さ） をフォントサイズで割った値を用いて、フォントの縦横比を正規化 （既定値）。cap-heightcap-height（大文字の高さ） をフォントサイズで割った値を用いて、フォントのcap-heightを正規化。ch-width0（ZERO, U+0030） の送り幅 （グリフの開始位置から次のグリフの開始位置までの距離） をフォントサイズで割った値を用いて、フォントの横幅を正規化。ic-width水（CJK 統合漢字, U+6C34） の送り幅をフォントサイズで割った値を用いて、フォントの横幅を正規化。ic-height水（CJK 統合漢字, U+6C34） の送り幅をフォントサイズで割った値を用いて、フォントの縦サイズを正規化。
下記のキーワード、もしくは数値 （どちらか一方） の組み合わせ。
from-font<number [0,∞]>データ型（要するに 0 以上の数値）
つまり、下記のような指定ができるということですね。
.example01 {
font-size-adjust: 0.545;
/* 注） font-size-adjust: ex-height 0.545; と同じ意味 */
}
.example02 {
font-size-adjust: ch-width 0.545;
}
.example03 {
font-size-adjust: from-font;
}
具体的なコード
仕様書から具体的なサンプルコードを見てみましょう。
例えば下記のような CSS があって、
p {
font-family: Verdana, Times;
}
p.adj {
font-size-adjust: 0.545;
}
下記のような HTML に指定されているとします。
<p>Lorem ipsum dolor sit amet, ...</p>
<p class="adj">Lorem ipsum dolor sit amet, ...</p>
font-family プロパティで最優先に指定されている Verdana フォントの、大文字に対する小文字の相対的な高さ比率は 0.545 ですが、もし、閲覧者の環境に Verdana フォントが存在せず、Times フォントにフォールバックされた場合、Times フォントが持つ本来の同比率は 0.447 で、Verdana フォントに比べると小文字が小さいため、font-size-adjust プロパティの指定がされていない方の段落は少し読みにくくなってしまう可能性があります。
そこで、font-size-adjust プロパティに 0.545 を指定することで、仮に Times フォントが使用された場合でも、その大文字と小文字の高さ比率を、Verdana フォントと同じにして、読みやすさが損なわれないようにするような使用方法が考えられると。
なお、font-size-adjust プロパティは、フォントのフォールバックが発生した場合に備えるのが主な用途ですので、font-size-adjust プロパティ指定する数値は、最優先に指定しているフォントの比率にするべきです。
そんなのわからん、っていう場合は、数値の指定ではなく、from-font 値を使用すれば、仕様上は、ブラウザが最優先に指定しているフォントから比率を取得してくれますので楽です。
ということで、フォントの違いによる読みやすさにの差異をなるべくなくしたいという場合は、指定しておくとあとはブラウザが良きに計らってくれますのでとても便利な CSS プロパティになります。ブラウザサポートの足並みもそろったので気になる方は試してみるとよいと思います。
