テキストに関するプロパティ2

前回はフォントについて色々紹介しましたね。今回もフォントについて紹介します。しかも前回よりマニアック度が上がっていて実際はお目にかかることがほとんどないでしょう。それでも紹介します。今回の内容は読み飛ばしても支障はありません。読む場合も読み流す程度で結構です。

フォントサイズの調整

font-size-adjustプロパティは、その名の通りフォントサイズを調整できるプロパティです。ただ、日本語圏で使うことはほぼないでしょう。

上に書いた通り、「フォントサイズに対するx-heightの割合」を用いて指定します。

どういうことかというと、x-height（小文字のxの高さ）というのは、アルファベットの小文字全般の高さの指標です。また、フォントサイズに対してx-heightの高さがどれくらいかというのはフォントによって違います。例えば、フォントサイズが同じ20pxだったとしても、x-heightはフォントによっては10pxだったり12pxだったりするかもしれません。そうなった場合に、フォントサイズは実際には同じなのに、フォントサイズが違うかのような印象を受けます。逆に言うと、フォントサイズが違っても、x-heightが同じならばサイズが揃っているような印象を受けるということです。

そこで、x-heightを指定してやることができます。これは特に、font-familyで複数のフォント候補を指定した際に、同じフォントサイズでもフォントの種類によってx-heightが違い、サイズが違って見えるということを防ぐことにも利用できます。

x-heightの指定の仕方は割合です。例えばfont-size-adjust:0.5と指定した場合は、フォントサイズの0.5倍になります。例えばフォントサイズが20pxのときはx-heightは10pxになります。これは、例えば同じ10pxでもフォントサイズ100pxに対する10pxと20pxに対する10pxでは意味が違うためです。相対的な指定ならばフォントサイズがいくらでも対応できます。

font-size-adjustの実際の動作では、x-heightが指定された値になるようにフォントサイズが変更されます。

たとえば、フォントサイズ20pxのとき、そのフォントでのx-heightは半分の10pxだったとしましょう。このときfont-size-adjust:0.6となった場合、x-heightは12pxにならないといけません。このとき、フォントサイズは24pxに変更されます。こうすることでx-heightが12pxになりました。

font-size-adjustを試してみましょう。font-sizeは全部同じで、font-size-adjustを0.1から1まで増やしていきます。

対応ブラウザ（Firefox19.0.2）による表示

対応ブラウザなら、一番下の1.0のところで、左の「1.0」の数字（font-size-adjustの影響を受けていない）の高さと右の「English」のnやsの高さ、gの丸い部分の高さがだいたい同じであることが見て取れます。

ちなみに数字以外の値についてですが、noneはx-heightの調整をしない、autoはfont-familyで指定された最初のフォントに合わせることになっています。

このautoは上で述べた、font-familyで複数候補を指定したときに、どのフォントが選ばれても想定した文字の大きさになるように使用できます。

すごく細かい設定

これまた日本語には馴染みの薄い話題ですが、カーニングとは、文字の組み合わせによっては不自然に隙間が開いてしまうのでそれを調整することです。詳しくは調べて下さい。

フォントによっては、カーニングのための情報を含んでいます。normalのときは、その情報を利用してカーニングを行います。noneのときは行いません。

autoでは、ブラウザが自動的に判断します。例えば日本語ならカーニングは必要ないと判断してnoneの動作になるでしょう。もっとも、たとえnormalでも、日本語のフォントは大抵カーニング情報など持っていないので、カーニングは行われないでしょう。一応カーニングありとカーニング無しで比べてみましょう。

次も、日本語にはあまり関係のない話題です。合字とは、たとえばfiが合体してfiになったりするものです。

合字についての情報も、フォントが保持しています。特にOpenTypeという規格があり、それに基づいてこのfont-variant-ligaturesは定められています。合字にも何種類かあり、OpenTypeにおいてはそれぞれliga,clig,dlig,hlig,calt及びrligというものがあります。このうちrligは言語的に必須なもので、font-variant-ligaturesによってどういう設定をしようと有効になります。

その他の種類については、このプロパティによって個別に設定できます。ただしligaとcligは一括で指定しなければなりません。それぞれの合字がどういうものについては自分で調べて下さい。

これらのそれぞれについて、有効にするか無効にするかをキーワードで指定します。

liga,clig

common-ligatures:有効,no-common-ligatures:無効。

dlig

discretionary-ligatures:有効,no-discretionary-ligatures:無効。

hlig

historical-ligatures:有効,no-historical-ligatures:無効。

calt

contextual:有効,no-contextual:無効。

以上の4項目についてそれぞれキーワードを選ぶとキーワードが4つになります。これらを好きな順番で並べます。つまり、例えばfont-variant-ligatures:common-ligatures no-discretionary-ligatures historical-ligatures no-contextual;のように指定します。

やけに長いですが、こんな細かい指定をする機会も無いものでしょう。

以上のような長い指定の代わりに、normalを指定出来ます。これはフォントによって定められたデフォルトに設定してくれます。デフォルトでnormalなので、普通はfont-variant-ligaturesなんか指定しなくても事足りるでしょう。また、noneという指定も可能です。これは全部無効にします。

今紹介した2つの他にも、ほとんど使わないようなプロパティがいくつかあります。名前だけ紹介するので、興味があれば調べて下さい。多分知らなくてもほとんど支障はありません。

font-variant-position,font-variant-caps,font-variant-numeric,font-variant-alternates,font-variant-east-asian,font-variant,font-features-settings,font-language-override

一括指定

これはそこそこ使います。フォント関係は、前回紹介したfont-size,font-family,font-weight,font-styleなど設定項目が多いです。これを一括で指定することができるのがfontプロパティです。

見ての通り、fontプロパティで一括指定できるのは、font-weight,font-style,font-stretch,font-size,line-height,font-familyプロパティです。このうちline-heightプロパティはまだ紹介していませんが、次回紹介します。fontプロパティを使う際に省略できないのが、font-sizeとfont-familyです。

例えば、次のようなフォント指定があったとします。

body {
	font-weight:bold;
	font-style:italic;
	font-size:2em;
	font-family:sans-serif;
}

これはfontプロパティを用いて次のように書けます。

body {
	font:bold italic 2em sans-serif;
}

またこれに、

body {
	font-weight:bold;
	font-style:italic;
	font-size:2em;
	font-family:sans-serif;
	line-height:150%;
}

のようにline-heightの指定（意味は次回紹介します）が加わった場合次のようになります。

body {
	font:bold italic 2em /150% sans-serif;
}

このように、fontプロパティを使うと長々とした指定を簡単に書けます。