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

前編はこちら

font-feature-settings: 'hist';

古書体・古典字体
同等: font-variant-alternates: historical-forms;

非適用: Prospect is often better than possession.
適用時: Prospect is often better than possession.

このページで使用しているフォントが古典字体非対応なのでブラウザがこのプロパティに対応していても表示に変化は無い筈。


font-feature-settings: 'salt' style#;

スタイル書体
同等: font-variant-alternates: stylistic (style);

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

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


font-feature-settings: 'ss##';

スタイルセット
同等: font-variant-alternates: styleset (set#);

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

適用時: The quick brown fox jumps over the lazy dog. (ss01)

適用時: The quick brown fox jumps over the lazy dog. (ss02)

適用時: The quick brown fox jumps over the lazy dog. (ss03)

aとgの字形の違いを注視。


font-feature-settings: 'swsh' glyph#;

スウォッシュ書体
同等: font-variant-alternates: swash (glyph);

非適用: The Quick Brown Fox.

適用時: The Quick Brown Fox.

このページで使用しているフォントがスウォッシュ非対応なのでブラウザがこのプロパティに対応していても表示に変化は無い筈。少し探してみたが、スウォッシュ(はね)の切り替え対応フォントはフリーでは見つからなかった。最初からグリングリン・ウネウネのはね付き文字だけが表示できるフォントはフリーでも多くあるようだが、それは画像作成でちょこっと使うならともかくウェブではちょっと・・・。
ちなみにこんなの。(画像↓)
スウォッシュ見本


font-feature-settings: 'ornm' ornament#;

装飾記号
同等: font-variant-alternates: ornaments (name);

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

このページで使用しているフォントが装飾記号非対応なのでブラウザがこのプロパティに対応していても表示に変化は無い筈。


font-feature-settings: 'nalt' #;

注釈文字
同等: font-variant-alternates: annotation (name);

非適用: あA1あA1
適用時: あA1あA1

このページで使用しているフォントが注釈文字非対応なのでブラウザがこのプロパティに対応していても表示に変化は無い筈。


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



font-feature-settings: 'jp78'; (他jp83, jp90, jp04)

同等: font-variant-east-asian: jis78; (他jis83, jis90, jis04)

非適用: 鯵鰺,蛎蠣,撹攪,諌諫,迩邇,唖,鴎,柵


jp78: JIS第1次規格 旧JIS (JIS X 0208-1978)
適用時: 鯵鰺,蛎蠣,撹攪,諌諫,迩邇,唖,鴎,柵

jp83: JIS第2次規格 新JIS (JIS X 0208-1983)
適用時: 鯵鰺,蛎蠣,撹攪,諌諫,迩邇,唖,鴎,柵

旧JISと新JISでは入れ替わった字が多くある。



非適用: 鉛,殻,交,収,班,豕,均,埴,派,渣,膵


jp83: JIS第2次規格 新JIS (JIS X 0208-1983)
適用時: 鉛,殻,交,収,班,豕,均,埴,派,渣,膵

jp90: JIS第3次規格 (JIS X 0208-1990)
適用時: 鉛,殻,交,収,班,豕,均,埴,派,渣,膵

Noto Sans JPでは「交」「豕」など一部の字で違いが無いという表示になった。



非適用: 溢,噂,晦,葛,翰,祇,捲,甑,酋,籾,愈


jp90: JIS第3次規格 (JIS X 0208-1990)
適用時: 溢,噂,晦,葛,翰,祇,捲,甑,酋,籾,愈

jp04: JIS拡張漢字2004年(JIS X 0213-2004)
適用時: 溢,噂,晦,葛,翰,祇,捲,甑,酋,籾,愈


font-feature-settings: 'smpl';

簡体字への置き換え
同等: font-variant-east-asian: simplified;

非適用: 飛,務,開,郷,業,樂,習,廣,雑,婦
適用時: 飛,務,開,郷,業,樂,習,廣,雑,婦


font-feature-settings: 'trad';

繁体字への置き換え
同等: font-variant-east-asian: traditional;

非適用: 台湾 翻訳 県庁
適用時: 台湾 翻訳 県庁


簡体字・繁体字への置き換え表示は多くのブラウザが未対応。


font-feature-settings: 'fwid';

日本語の1.0em等幅文字で表示(半角数字と空白)
同等: font-variant-east-asian: full-width;

非適用: ab8fiW 012345 あぃうぇお
適用時: ab8fiW 012345 あぃうぇお

半角の数字と空白が「かな」や漢字の1emと同じ(要するに全角サイズ)に変わる。ただし、英字とのみ接する数字は半角になるようなので使い方に注意。


font-feature-settings: 'hwid';

日本語の0.5em等幅文字(通常より細め)で表示(半角数字のみ)
同等: 無し

非適用: 犬も歩けば10,000円に当たる。 The lazy dog.
適用時: 犬も歩けば10,000円に当たる。 The lazy dog.

半角の数字が漢字の0.5emと同じ(要するに半角サイズ)に変わる。ただし、半角空白文字は通常より広幅になるようなので使い方に注意。


font-feature-settings: 'twid';

日本語の1/3em等幅文字(三分字)で表示(半角数字のみ)
同等: 無し

非適用: 犬も歩けば100円に当たる。 The lazy dog.
適用時: 犬も歩けば100円に当たる。 The lazy dog.

半角の数字が漢字の1.0emに3つ並ぶ(要するに1/3サイズ)に変わる。このプロパティを利用できるフォントやブラウザが限られる?


font-feature-settings: 'qwid';

日本語の1/4em等幅文字(四分字)で表示(半角数字のみ)
同等: 無し

非適用: 犬も歩けば1000円に当たる。 The lazy dog.
適用時: 犬も歩けば1000円に当たる。 The lazy dog.

半角の数字が漢字の1.0emに4つ並ぶ(要するに1/4サイズ)に変わる。このプロパティを利用できるフォントやブラウザが限られる?


font-feature-settings: 'pwid';

プロポーショナル文字で表示
同等: font-variant-east-asian: proportional-width;

非適用: abfiW 012345 あぃうぇおっ
適用時: abfiW 012345 あぃうぇおっ

英字はプロポーショナル文字で表示が標準なので同じ表示の筈。


font-feature-settings: 'ruby';

ルビに専用グリフを表示
同等: font-variant-east-asian: ruby;

非適用: 素早すばや茶色ちゃいろきつねはのろまないぬえる。

適用時: 素早すばや茶色ちゃいろきつねはのろまないぬえる。

ルビに使用する文字を通常より読みやすいグリフに変えて表示するということだが、このページで使用しているNoto Sans JPでは非対応?


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



font-feature-settings: 'halt';

役物を半角幅で表示
同等: 無し

非適用: あぃうぇおっ。 ゃ、ゅ、ょ。 The lazy dog.
適用時: あぃうぇおっ。 ゃ、ゅ、ょ。 The lazy dog.


font-feature-settings: 'palt';

「かな」と役物をプロポーショナル(可変)幅で表示
同等: 無し

非適用: あぃうぇおっ。 ゃ、ゅ、ょ。 The lazy dog.
適用時: あぃうぇおっ。 ゃ、ゅ、ょ。 The lazy dog.


font-feature-settings: 'pkna';

「かな」をプロポーショナル(可変)幅で表示 (役物は非対象)
同等: 無し

非適用: あぃうぇおっ。 ャ、ュ、ョ。 The lazy dog.
適用時: あぃうぇおっ。 ャ、ュ、ョ。 The lazy dog.

pknaが何故か効かないみたい。


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



リガチャ(合字)は日本ではあまり馴染みがないがアルファベット圏では使うみたい。

font-feature-settings: 'liga', 'clig';

常用合字(Common Ligatures) f+f, f+i, f+j?, f+l
OpenType機能のligaとcligの組み合わせで常用合字になる。
同等: font-variant-ligatures: common-ligatures;

非適用: final office fjord flight
適用時: final office fjord flight

フォントによっては標準がリガチャになっているので合字が嫌なら無効を指定する。


font-feature-settings: 'dlig';

任意の合字(Discretionary Ligatures) s+t, c+t, T+h, s+p
同等: font-variant-ligatures: discretionary-ligatures;

非適用: fast act Thanks special
適用時: fast act Thanks special


font-feature-settings: 'hlig';

古典合字(Historical Ligatures) t+z
同等: font-variant-ligatures: historical-ligatures;

非適用: sitze
適用時: sitze


font-feature-settings: 'calt';

連結部置換 (Contextual Alternates)
同等: font-variant-ligatures: contextual;

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

終わりに

日本語(の特に「かな」)は細い文字太い文字があるにも関わらずウェブでは通常は等幅で表示される。さらに文字の間隔も無駄に空いて表示されることが多く、非常に間延びして見える。日本語(の「かな」)がプロポーショナルな可変幅表示になると締まった印象になるので是非利用したいところ。font-feature-settings:'palt' はこの「がとらぼ」でも利用中。ただし、palt単独では文字間が狭すぎて窮屈に感じることもあるかと思うので letter-spacing も併用して文字間を少しだけ拡げてやった方が良いかも。または、paltは役物(句読点etc)が狭すぎるということであればpknaの方が良いかもしれないが、「がとらぼ」の中の人の環境(Chrome72 beta)ではpknaが効かないので使用していない。
他は使いどころが難しいなぁというのがホンネ。細かいデザインに煩い人用?