@font-feature-values CSS @-規則 は、OpenType では異なる方法でアクティベートされる特性について、font-variant-alternates プロパティ内で共通の名前を使用できます。これは単純に、複数のフォントを使用する場合に CSS での指定を助けます。

/* Font One における "nice-style" のための @-規則 */
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/* Font Two における "nice-style" のための @-規則 */
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
} 

…

/* 1 回の宣言で @-規則を適用 */
.nice-look {
  font-variant-alternates: styleset(nice-style);
}

@font-feature-values @-規則は、CSS のトップレベルと任意の CSS 条件グループ @-規則 のどちらでも使用できます。

構文

特性値のブロック

@swash
font-variant-alternatesswash() 関数表記に渡される特性名を指定します。文字飾り (swash) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
@annotation
font-variant-alternatesannotation() 関数表記に渡される特性名を指定します。注釈 (annotation) 特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
@ornaments
font-variant-alternatesornaments() 関数表記に渡される特性名を指定します。装飾活字 (ornaments) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
@stylistic
font-variant-alternatesstylistic() 関数表記に渡される特性名を指定します。文字様式 (stylistic) の特性値に定義できる値は 1 個だけです。ident1: 2 は正しいですが、ident2: 2 4 は正しくありません。
@styleset
font-variant-alternatesstyleset() 関数表記に渡される特性名を指定します。ident1: 2 4 12 1 は、OpenType 値 ss02 および ss04, ss12, ss01 にマッピングされます。99 よりも大きな値は正しいですが、どの OpenType 値にもマッピングされず、無視されます。
@character-variant
font-variant-alternatescharacter-variant() 関数表記に渡される特性名を指定します。異体字 (character-variant) の特性値に定義できる値は 1 個または 2 個です。ident1: 3cv03=1 にマッピングされ、ident2: 2 4cv02=4 にマッピングされます。

正式な構文

@font-feature-values <family-name># {
  <feature-value-block-list>
}

where
<family-name> = <string> | <custom-ident>+
<feature-value-block-list> = <feature-value-block>+

where
<feature-value-block> = <feature-type> '{' <feature-value-declaration-list> '}'

where
<feature-type> = @stylistic | @historical-forms | @styleset | @character-variant | @swash | @ornaments | @annotation
<feature-value-declaration-list> = <feature-value-declaration>

where
<feature-value-declaration> = <custom-ident>: <integer>+;

仕様

仕様書 策定状況 備考
CSS Fonts Module Level 3
@font-feature-values の定義
勧告候補 初期定義。

ブラウザーの実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
@font-feature-values
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし
@annotation
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし
@character-variant
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし
@historical-forms
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし
@ornaments
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし
@styleset
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし
@stylistic
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし
@swash
実験的
Chrome 未対応 なしEdge 未対応 なしFirefox 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 未対応 なしSafari 完全対応 9.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 34
完全対応 34
完全対応 24
無効
無効 From version 24: this feature is behind the layout.css.font-features.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 未対応 なしSafari iOS 完全対応 9.3Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連項目

ドキュメントのタグと貢献者

このページの貢献者: Marsf
最終更新者: Marsf,