font-variant-alternates

font-variant-alternatesCSSプロパティは代替グリフの使用を制御します。代替グリフは@font-feature-valuesで定義された代替名で参照される可能性があります。

/* 予約語 */
font-variant-alternates: normal;
font-variant-alternates: historical-forms;

/* 函数表記値 */
font-variant-alternates: stylistic(user-defined-ident);
font-variant-alternates: styleset(user-defined-ident);
font-variant-alternates: character-variant(user-defined-ident);
font-variant-alternates: swash(user-defined-ident);
font-variant-alternates: ornaments(user-defined-ident);
font-variant-alternates: annotation(user-defined-ident);
font-variant-alternates: swash(ident1) annotation(ident2);

/* 大域値 */
font-variant-alternates: initial;
font-variant-alternates: inherit;
font-variant-alternates: unset;

@font-feature-values@規則は,OpenType機能と関連付けられた代替グリフ函数(stylisticstylesetcharacter-variantswashornament,又はannotation)用の名前を定義できます。本プロパティを用いて,(@font-feature-valuesで定義された)対人可読な名前をスタイルシートで使うことができます。

初期値normal
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

書式

本プロパティは二つの形式の内一方を取ります:

  • 予約語normal
  • 一又は複数の後掲した他の予約語及び函数(空白区切り・順不同)

normal
この予約語は代替グリフを無効にします。
historical-forms
この予約語は歴史的形式――過去には一般的だったけれども今日そうではないグリフ――を有効にします。OpenTypeのhist機能タグに相当します。
stylistic()
この函数は個々の文字に対する様式的代替 (stylistic alternates) を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのsalt機能タグ(例: salt 2)に相当します。
styleset()
この函数は一連の文字に対する様式的代替を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのssXY機能タグ(例: ss02)に相当します。
character-variant()
この函数は文字に対する様式的代替を有効にします。styleset()に似ていますが,一連の文字に対して一貫したグリフを作成せず,個々の文字が持つ様式は独立しており整合する必要はありません。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのcvXY機能タグ(例: cv02)に相当します。
swash()
この函数は先端装飾〔訳注: グリフの先端を流線的に延長する装飾。訳語参考〕グリフを有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのswsh及びcswh機能タグ(例: swsh 2及びcswh 2)に相当します。
ornaments()
この函数は花形装飾活字及び他の飾り文字グリフのような装飾を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのornm機能タグ(例: ornm 2)に相当します。
注意: 文義を維持する目的で,フォント設計者は,箇条書き記号 (U+2022) の装飾的変形としてのUnicodeの飾り文字とマッチしないような装飾を含めるべきです。幾つかの既存のフォントがこの助言に従っていないことに留意して下さい。
annotation()
この函数は丸数字又は鏡文字などの表記を有効にします。引数には数値に割り当てられたフォント固有の名称を指定します。OpenTypeのnalt機能タグ(例: nalt 2)に相当します。

形式文法

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> ) ]

ここで
<feature-value-name> = <custom-ident>

HTML

<p>Firefox rocks!</p>
<p class="variant">Firefox rocks!</p>

CSS

@font-feature-values "Leitura Display Swashes" {
    @swash { fancy: 1 }
}

p {
  font-size: 1.5rem;
}

.variant {
  font-family: Leitura Display Swashes;
  font-variant-alternates: swash(fancy);
}

結果

注意: この例を正しく閲覧するには,OpenTypeフォントLeitura Display Swashesを導入する必要があります。fontsgeek.com等から試験目的の無償版が入手できます。

仕様書

仕様書 状態 備考
CSS Fonts Module Level 3
font-variant-alternates の定義
勧告 初期定義

ブラウザ互換性

BCD tables only load in the browser