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
font-feature-settings: 'sups';
上付き添え字
同等: font-variant-position: super;
非適用: Hello World. E=mc2
適用時: Hello World. E=mc2
適用時・非適用時の見た目が全く同じであるなら、閲覧しているブラウザはそのプロパティに対応していないかもしれません。(適用値=標準値を除く)
font-feature-settings: 'lnum';
高さの揃った数字(現在の普通)
同等: font-variant-numeric: lining-nums;
非適用: 0123456789, 1/2, 1/23
適用時: 0123456789, 1/2, 1/23
font-feature-settings: 'onum';
高さの揃わないオールドスタイルの数字
同等: font-variant-numeric: oldstyle-nums;
非適用: 0123456789, 1/2, 1/23
適用時: 0123456789, 1/2, 1/23
font-feature-settings: 'pnum';
幅の揃わないプロポーショナルの数字
同等: font-variant-numeric: proportional-nums;
非適用: 0123456789, 1/2, 1/23
適用時: 0123456789, 1/2, 1/23
font-feature-settings: 'tnum';
等幅(表形式)の数字
同等: font-variant-numeric: tabular-nums;
非適用: 0123456789, 1/2, 1/23
適用時: 0123456789, 1/2, 1/23
font-feature-settings: 'frac';
斜め置きの分数
同等: font-variant-numeric: diagonal-fractions;
非適用: 0123456789, 1/2, 1/23
適用時: 0123456789, 1/2, 1/23
font-feature-settings: 'afrc';
水平の分数
同等: font-variant-numeric: stacked-fractions;
非適用: 0123456789, 1/2, 1/23
適用時: 0123456789, 1/2, 1/23
font-feature-settings: 'ordn';
順序を表す
同等: font-variant-numeric: ordinal;
非適用: 1st, 2nd, 3rd, 4th, 5th
適用時: 1st, 2nd, 3rd, 4th, 5th
font-feature-settings: 'zero';
斜線付きのゼロ (ゼロの中に点)
同等: font-variant-numeric: slashed-zero;
非適用: 0, 0000, 0.1230
適用時: 0, 0000, 0.1230
フォントによっては0, 0000, 0.1230のようにゼロ中に点のものもある。
適用時・非適用時の見た目が全く同じであるなら、閲覧しているブラウザはそのプロパティに対応していないかもしれません。(適用値=標準値を除く)
後編に続く。