CSS - @font-feature-values

概要

ルール名@font-feature-values
構文@font-feature-values { @family-name { ... } }
サポートhttps://caniuse.com/mdn-css_at-rules_font-feature-values

説明

font-variant-alternates で指定する名前を定義します。@family-name には下記のいずれかを指定します。

@swash
font-variable-alternates: swash() に指定する名前。
@annotation
font-variable-alternates: annotation() に指定する名前。
@ornaments
font-variable-alternates: ornaments() に指定する名前。
@stylistic
font-variable-alternates: stylistic() に指定する名前。
@styleset
font-variable-alternates: styleset() に指定する名前。
@haracter-variant
font-variable-alternates: haracter-variant() に指定する名前。

使用例

下記の様に定義することにより、Font-1 に対しても、Font-2 に対しても、同じ cool や pretty という特性名を使用することができます。

CSS
@font-feature-values Font-1 {
  @swash {
    cool: 1;
    pretty: 2;
  }
}
@font-feature-values Font-2 {
  @swash {
    cool: 3;
    pretty: 4;
  }
}
p {
  font-family: 'Font-1';
  font-variant-alternates: swash(cool);
}

関連項目

リンク

Copyright (C) 2025 杜甫々
初版：2025年5月18日、最終更新：2025年5月18日
https://www.tohoho-web.com/css/rule/font-feature-values.htm