CSS - font-variant-alternates

概要

属性名	font-variant-alternates
値	normal \| [ historical-forms \|\| stylistic(<feature-value-name>) \|\| styleset(<feature-value-name>#) \|\| character-variant(<feature-value-name>#) \|\| swash(<feature-value-name>) \|\| ornaments(<feature-value-name>) \|\| annotation(<feature-value-name>) ]
初期値	normal
適用可能要素	すべての要素
継承	継承する
メディア	Visual
サポート	C3 / Fx34

説明

フォントは、与えられた文字に対してデフォルトの字形に加え、様々な代替字形を提供することが可能です。いくつの代替字形が利用可能か、それぞれが何を意味しているかはフォントに依存します。@font-feature-values ルールにおいて、代替字形を選択するための数値 <feature-index> と特性値名 <feature-value-name> を定義します。font-variant-alternates で特性値名を指定することで、これらの代替字形を選択することができます。

値	説明
normal	通常の字形で表示します。
historical-forms	歴史的字形(historical forms: OpenType の hist 相当)で表示します。
stylistic(<feature-value-name>)	スタイリスティック代替字形(stylistic alternates: OpenType の salt #n 相当)で表示します。
styleset(<feature-value-name>#)	スタイリスティックセット字形(stylistic sets: OpenType の ss#n 相当)で表示します。
character-variant(<feature-value-name>#)	異体字形(character variants: OpenType の cv#n 相当)で表示します。
swash(<feature-value-name>)	巻き髭字形(swash glyphs: OpenType の swsh #n または cswh #n 相当)で表示します。
ornaments(<feature-value-name>)	装飾字形(swash glyphs: OpenType の ornm #n 相当)で表示します。
annotation(<feature-value-name>)	注釈字形(annotation forms: OpenType の nalt #n 相当)で表示します。

それぞれの字形のサンプルは下記などを参照してください。

https://typofonderie.com/font-support/opentype-features/

使用例

下記の例では、"Noble Script" フォントの、巻き髭字形#2 で表示することを指定しています。

CSS

@font-feature-values Noble Script {
  @swash {
    swishy: 1;
    flowing: 2;
  }
}
p {
  font-family: 'Noble Script';
  font-variant-alternates: swash(flowing);
}

リンク

初版：2015年11月15日、最終更新：2015年11月15日

https://www.tohoho-web.com/css/prop/font-variant-alternates.htm

CSS - font-variant-alternates

概要

説明

使用例

関連項目

リンク