CSS/@font-feature-values

@font-feature-values

@font-feature-valuesルールは、OpenTypeフォントの特定の機能をカスタマイズして名前を付けるために使用されます。これにより、CSSで特定のフォント機能を簡潔に利用できるようになります。

概要

OpenTypeフォントには、文字間の合字や異なる数字のスタイルなど、さまざまなフォント機能があります。@font-feature-valuesを使用すると、これらの機能をわかりやすい名前で定義し、後にCSS内で参照できます。

書式

@font-feature-valuesルールの基本的な構文は以下の通りです：

@font-feature-values <フォントファミリ名> {
  @styleset {
    <名前>: <値>;
  }
  @character-variant {
    <名前>: <値>;
  }
  @swash {
    <名前>: <値>;
  }
  @ornaments {
    <名前>: <値>;
  }
  @annotation {
    <名前>: <値>;
  }
}

@styleset: スタイルセット機能を定義します。
@character-variant: 文字のバリエーションを定義します。
@swash: スワッシュ（装飾的な字形）を定義します。
@ornaments: 装飾用の字形を定義します。
@annotation: 注釈付き字形を定義します。

使用例

以下は、特定のフォント機能をカスタマイズする例です：

@font-feature-values MyCustomFont {
  @styleset {
    fancy: 1;
    elegant: 2;
  }
  @character-variant {
    alt1: 1;
    alt2: 2;
  }
}

p {
  font-family: 'MyCustomFont';
  font-feature-settings: "fancy", "alt1";
}

この例では、MyCustomFontというフォントに対して「fancy」と「alt1」というカスタム機能を定義し、それをCSSで使用しています。

定義可能なサブルール

@font-feature-valuesでは以下のサブルールを使用して、さまざまな機能を定義できます：

@styleset: フォントに存在するスタイルセットを定義します。
@character-variant: 特定の文字バリエーションを定義します。
@swash: スワッシュのスタイルを指定します。
@ornaments: フォントの装飾機能を定義します。
@annotation: 注釈付きの字形を指定します。

実用的な使用例

以下は、特定のフォント機能をカスタマイズして利用する例です：

@font-feature-values MySerifFont {
  @styleset {
    traditional: 1;
    modern: 2;
  }
  @character-variant {
    alternate: 1;
  }
}

h1 {
  font-family: 'MySerifFont';
  font-feature-settings: "traditional";
}

p {
  font-family: 'MySerifFont';
  font-feature-settings: "modern", "alternate";
}

この例では、MySerifFontフォントに対して2つのスタイルセット（traditionalとmodern）および1つの文字バリエーション（alternate）を定義し、それを適用しています。

注意事項

互換性: 現在、すべてのブラウザが@font-feature-valuesを完全にはサポートしていません。使用する前に互換性を確認してください。
フォント依存: 定義する機能は使用するフォントに依存します。フォント自体がOpenType機能をサポートしている必要があります。

CSS/@font-feature-values

目次

@font-feature-values

概要

書式

使用例

定義可能なサブルール

実用的な使用例

注意事項

関連情報