CSS Reference

@font-feature-values

代替字体を定義する

@font-feature-values @規則は、代替字体の特性インデックス（<feature-index>）と特性値名（<feature-value-name>）を定義します。定義した代替字体の特性値名は、font-variant-alternates プロパティで指定することができます。

@font-feature-values 規則の基本的な構文は下記のようになります。

@font-feature-values <family-name># { <declaration-rule-list> }

<family-name> は、フォントファミリーの名称です。カンマ（,）で区切って複数指定することも可能です。

<declaration-rule-list> は下記ような記述になります。

@stylistic

font-variant-alternates プロパティの stylistic() 関数から参照する特性値名を指定します。

@font-feature-values foo {
  @stylistic {
    salt: 2;
  }
}

@historical-forms

font-variant-alternates プロパティには historical-forms キーワード（歴史的字体（OpenType における hist 相当）による表示を有効にする）が定義されています。

それに対応するため仕様上、存在しますが、具体的な使用方法は提示されていません。

@styleset

font-variant-alternates プロパティの styleset() 関数から参照する特性値名を指定します。

@font-feature-values Bongo {
  @swash {
    ornate: 1;
    double-loops: 1;
  }
  @styleset {
    double-W: 14;
    sharp-terminals: 16 1;
  }
}

@character-variant

font-variant-alternates プロパティの character-variant() 関数から参照する特性値名を指定します。

@font-feature-values Athena Ruby {
  @character-variant {
    leo-B: 2 1;
    leo-M: 13 3;
    leo-alt-N: 14 1;
    leo-N: 14 2;
    leo-T: 20 1;
    leo-U: 21 2;
    leo-alt-U: 21 4;
  }
}

p {
  font-variant: discretionary-ligatures
                character-variant(leo-B, leo-M, leo-N, leo-T, leo-U);
}

span.alt-N {
  font-variant-alternates: character-variant(leo-alt-N);
}

span.alt-U {
  font-variant-alternates: character-variant(leo-alt-U);
}

@swash

font-variant-alternates プロパティの swash() 関数から参照する特性値名を指定します。

@font-feature-values foo {
  @swash {
    pretty: 1;
    cool: 2;
  }
}

@ornaments

font-variant-alternates プロパティの ornaments() 関数から参照する特性値名を指定します。

@font-feature-values foo {
  @ornaments {
    ornm: 12;
  }
}

@annotation

font-variant-alternates プロパティの annotation() 関数から参照する特性値名を指定します。

@font-feature-values Otaru Kisa {
  @annotation {
    circled: 1;
    black-boxed: 3;
  }
}
@font-feature-values Taisho Gothic {
  @annotation {
    boxed: 1;
    circled: 4;
  }
}

h1 {
  font-family: Otaru Kisa, Taisho Gothic;
  font-variant: annotation(circled);
}

主要ブラウザの対応

IE11 ×
Edge（EdgeHTML） ×
Edge（Chromium） ○
Chrome ○
Firefox ○
Safari ○
iOS Safari ○
Android Chrome ○

関連する@-規則

仕様書

用途から CSS プロパティやセレクタを探す

用途から CSS プロパティやセレクタを逆引きできます。

対応ブラウザから CSS プロパティやセレクタを探す

対応ブラウザから CSS プロパティやセレクタを逆引きできます。

Edge（EdgeHTML）
Edge（Chromium）
Firefox
Chrome
Safari
iOS Safari
Android Chrome