【27】フォントサイズを調整する font-size-adjustプロパティ

最終更新日:2018年04月14日  (初回投稿日:2018年04月14日)

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

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

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

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

本日のINDEX
  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 です。
(サンセリフとセリフを 同時に指定するなんて、あまり無いけど、アスペクト値の差が大きくてわかりやすいので例として使いました)

Verdana (font-family: Verdana; font-size: 12px)
The 'font-size-adjust' property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.

Times (font-family: 'Times New Roman', Times; font-size: 12px)
The 'font-size-adjust' property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.

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

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

Verdana (font-family: Verdana; font-size: 12px; font-size-adjust: 0.51;)
The 'font-size-adjust' property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.

Times (font-family: 'Times New Roman', Times; font-size: 12px; font-size-adjust: 0.51;)
The 'font-size-adjust' property is a way to preserve the readability of text when font fallback occurs. It does this by adjusting the font-size so that the x-height is the same regardless of the font used.

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 に決めました。

Bbx Bbx Bbx

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」が無い時、ブラウザがそれを合成していいかどうかを指定するプロパティです。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
03 | 2018/04 | 05
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 - - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.