CSS font-feature-settingsの表現比較前編

CSSのfont-feature-settingsやfont-variant系プロパティは使用するOpenTypeフォントの持つ機能を引き出して表現を豊かにすることができますが、その機能は利用するフォントに依存します。これらのプロパティを利用するにはブラウザが対応していることと利用するフォントに指定するプロパティの機能があることの2つが必須です。
フォントの持つ機能はフォント毎に全くバラバラです。なので、ウェブ作成者はフォントの機能を利用しようということであれば、その機能を持つフォントが使われるようにしなければなりません。つまり、font-familyでsans-serifやserifだけを指定するのはもちろん、或るOSだけが持つフォントを指定するという様なのはダメです。ウェブフォントが確実に読み込まれるようにしましょう。

今回はfont-feature-settingsをメインにし、同等の機能を持つfont-variant系プロパティがあればそれも書きました。機能例を表示するためのフォントが見つからないということに苦労させられて、全ては解決できませんでした。
font-feature-settingsやfont-variant系共にブラウザが対応していない機能があるということ、フォントに詳しくないと意味がわからないこと多々で、全てを気軽に利用できる状態では無いなという印象。アルファベット圏でない日本人にはあまり使いでのないのも多いし。

font-feature-settingsプロパティの使い方

初期値(既定値)は normal。nornal以外の値は必ず4文字でそれを引用符でくくる。その後にキーワードとして数字を取る。引用符は ' でも " でも可。
0が無効。0の代わりにoffと書くこともできる。
1が有効で1代わりにのonと書くこともできる。そして、1,on は省略できる。
2〜は必要に応じて。
複数指定することが可能で、その場合は , で区切って並べる。

つまり、
font-feature-settings: normal; ← 既定値に戻す(全て)
font-feature-settings: 'hoge' 0; ←hogeを無効にする
font-feature-settings: 'hoge' 1; ←hogeを有効にする
font-feature-settings: 'hoge' on; ←hogeを有効にする
font-feature-settings: 'hoge'; ←省略でもhogeを有効にする(1と同じ)
font-feature-settings: 'hoge' 2; ←hogeを有効且つhogeで使用する値(2以上)

font-feature-settings: normal;

normal (既定値・初期値 = 非適用)
参考: Hello World. The quick brown fox jumps over the lazy dog.

Small caps(スモールキャップス)は小文字xの高さ(x-height)で大文字を表現するもの。つまり小さな大文字。

font-feature-settings: 'smcp';

英小文字をSmall caps(スモールキャップス)化
同等: font-variant-caps: small-caps;

非適用: Hello World. The quick brown fox jumps over the lazy dog.
適用時: Hello World. The quick brown fox jumps over the lazy dog.

font-feature-settings: 'smcp', 'c2sc';

英小文字+英大文字をSmall caps(スモールキャップス)化
同等: font-variant-caps: all-small-caps;

非適用: Hello World. The quick brown fox jumps over the lazy dog.
適用時: Hello World. The quick brown fox jumps over the lazy dog.

font-feature-settings: 'unic';

英大文字をSmall caps(スモールキャップス)化
同等: font-variant-caps: unicase;

非適用: Hello World. The quick brown fox jumps over the lazy dog.
適用時: Hello World. The quick brown fox jumps over the lazy dog.

Petite caps(プチキャップス)はSmall caps(スモールキャップス)より僅かに小さい(ということになっている)。

font-feature-settings: 'pcap';

英小文字をPetite caps(プチキャップス)化
同等: font-variant-caps: petite-caps;

非適用: Hello World. The quick brown fox jumps over the lazy dog.
適用時: Hello World. The quick brown fox jumps over the lazy dog.

font-feature-settings: 'pcap', 'c2pc';

英小文字+英大文字をPetite caps(プチキャップス)化
同等: font-variant-caps: all-petite-caps;

非適用: Hello World. The quick brown fox jumps over the lazy dog.
適用時: Hello World. The quick brown fox jumps over the lazy dog.

font-feature-settings: 'titl';

タイトル用大文字(少し細めの大文字)化
同等: font-variant-caps: titling-caps;

非適用: Hello World.
適用時: Hello World.

適用時・非適用時の見た目が全く同じであるなら、閲覧しているブラウザはそのプロパティに対応していないかもしれません。(適用値=標準値を除く)

font-feature-settings: 'subs';

下付き添え字
同等: font-variant-position: sub;

非適用: Hello World. log39=2
適用時: Hello World. log39=2

ello, orld, 3が下付き添え字になっています。

font-feature-settings: 'sups';

上付き添え字
同等: font-variant-position: super;

非適用: Hello World. E=mc2
適用時: Hello World. E=mc2

ello, orld, 2が上付き添え字になっています。