CSS3

プロパティ

font-variant-alternates

 編集:2022.07.14 by T.A.

[Edge]?。→mdn

フォントの代替の使用を制御する。

名前 font-variant-alternates
normal |
[stylistic(<feature-value-name>) || historical-forms || styleset(<feature-value-name>#) || character-variant(<feature-value-name>#) || swash(<feature-value-name>) || ornaments(<feature-value-name>) || annotation(<feature-value-name>)]
初期値 normal
適用対象 すべての要素/テキスト
継承 される
百分率 受容しない
算出値 指定値
正準的順序 文法に従う
アニメーション型 離散的

以下のCSSが組み込んであります:

normal
下に挙げられるどの特能も、可能化されない。
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:normal;
">ABCabcffittjWordT.012</SPAN><BR>

stylistic()
stylistic(<feature-value-name>)

スタイル上の代替(フォントに特有、OpenType 特能: salt <feature-index>)による表示を可能化する。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:stylistic();
">ABCabcffittjkWordT.012</SPAN><BR>

historical-forms
歴史的な形(OpenType 特能: hist)による表示を可能化する。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:historical-forms;
">ABCabcffisttjkWordT.012</SPAN><BR>

styleset()
styleset(<feature-value-name>#)

スタイル上の設定(“stylistic sets”)(フォントに特有、OpenType 特能: ss <feature-index>)による表示を可能化する(OpenType は 現在 ss01 から ss20 までを定義している)。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:styleset();
">ABCabcdefistjkyWordT.012</SPAN><BR>

character-variant()
character-variant(<feature-value-name>#)

特定の異体文字(フォントに特有、OpenType 特能: cv <feature-index>)による表示を可能化する(OpenType は 現在 cv01 から cv99 までを定義している)。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:character-variant('cv01');
">ABCabcdefistjkyQT.012</SPAN><BR>

swash()
swash(<feature-value-name>)

swash グリフ(フォントに特有、OpenType 特能: swsh <feature-index>、cswh <feature-index>)による表示を可能化する。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:swash('swsh');
">ABCabcdefistjkyQT.012</SPAN><BR>
<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:swash('cswh');
">ABCabcdefistjkyQT.012</SPAN><BR>

ornaments()
ornaments(<feature-value-name>)

フォントにて供されているならば、既定のグリフに対する、装飾体による置換を可能化する(フォントに特有、OpenType 特能: ornm <feature-index>)。フォントには、広範囲な文字用に、代替として装飾体グリフを提供するものもある。しかしながら、恣意的な範囲の文字(例えば、英数字)を装飾体として表示させることは、データの意味論を歪めるので、拙い実施である。フォント デザイナーには、作者が ornaments() を利用して、欲するグリフを選定できるよう、すべての装飾体(Unicode Dingbats ブロック【U+2700 ~ U+27BF】の中で明示的に符号化されたもの、等々を除く)を[ビュレット文字(U+2022)用の代替]として符号化しておくことが奨励される。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:ornaments('ornm');
">ABCabc&#2022;<BR>
 &#2700;&#2701;&#2702;&#2703;&#2704;<BR>
 &#27c0;&#27c1;</SPAN><BR>

<SPAN style="font-family:メイリオ; font-size:30px;
 font-variant-alternates:ornaments('ornm');
">ABCabc&#2022;<BR>
 &#2700;&#2701;&#2702;&#2703;&#2704;<BR>
 &#27c0;&#27c1;</SPAN><BR>

annotation()
annotation(<feature-value-name>)

代替 annotation 形(フォントに特有、OpenType 特能: nalt <feature-index>)による表示を可能化する。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-alternates:annotation('nalt');
">ABCabcdefistjkyQT.012</SPAN><BR>

<SPAN style="font-family:メイリオ; font-size:30px;
 font-variant-alternates:annotation('nalt');
">ABCabcdefistjkyQT.012</SPAN><BR>

<feature-value-name>
=<ident>
@font-feature-values Noble Script{
  @swash{swishy:1; flowing:2;}
}
p{
  font-family:Noble Script;
  font-variant-alternates: swash(flowing); /*  swash の 2 番目の代替を利用  */
}

フォントは、所与のどの文字に対しても ― その文字用の既定のグリフに加えて ― 種々の代替グリフを供し得る。このプロパティは、これらの代替グリフの選定に対する制御を供する。

上に挙げるプロパティ値の多くに対し、いくつかの異なる代替グリフが可用になる。可用な代替の[個数、それぞれが表現するもの]は、フォントに特有なので、これらはそれぞれ、下の各種 値定義の中で フォントに特有 と記される。これらの代替は、その資質からフォントに特有なので、【作者は】特定の[フォント ファミリーまたはその集合]用に、@font-feature-values 規則を利用して[フォントに特有な数量特能 index と カスタムな特能値名との結び付け]をいくつか定義した上で、それらのカスタム名を、このプロパティにおける特定の代替を選定するために利用する:

@font-feature-values Noble Script { @swash { swishy: 1; flowing: 2; } }
p {
  font-family: Noble Script;
  font-variant-alternates: swash(flowing); /*  swash の 2 番目の代替を利用  */
}

ある特定の特能値名が[所与のファミリ、あるいは、ある特定の特能型 ]用に定義されていないときの、font-variant-alternates の算出値は、それが定義されていたとするときの算出値と同じになるものとする。しかしながら、ユーザー エージェントは、グリフを選ぶ際には、そのような未定義な特能値名を包含するプロパティ値を無視するものとする。

/*  次の 2 つのスタイル規則は、実質的に同じ:  */
p { font-variant-alternates: swash(unknown-value); } /*  定義された値でないので,無視される  */
p { font-variant-alternates: normal; }

これにより、値は、所与のフォント ファミリーの集合用には定義されて利用される一方、フォールバックが生じたときには、フォント ファミリー名が異なるので無視されるようになる。所与の値が、所与のフォントがサポートする範囲に入らない場合、その値は無視される。これらの値は、汎用フォント ファミリーには決して適用されない。


テスト

以下のCSSが組み込んであります:

HTML:

ここに表示
¶このフォントではだめそう
HTML:

ここに表示
スクリプト:


スクリプト:



表示内容:
表示内容: