【CSS Modules】@font-feature-valuesアットルールの使い方

@font-feature-valuesインターフェースは、CSSにおいてOpenTypeフォントの持つ多様なタイポグラフィ機能に対し、人間が理解しやすいカスタムの名前を定義するためのインターフェースです。これは、OpenTypeフォントが提供する複雑なフィーチャータグ（例: 文字の形状変更や数字のスタイル）を直接font-feature-settingsプロパティで指定する代わりに、意味のある識別子として定義し、CSSの可読性と保守性を高める目的で使用されます。フォントの詳細な知識がなくても、高度なタイポグラフィ機能を簡単に活用できるようになります。

具体的には、@font-feature-valuesルール内で、対象となるフォントファミリー名と、そのフォント機能に割り当てたいカスタム名を指定します。例えば、「特定のフォントで等幅数字を有効にする」という機能に対してfixed-width-numbersというカスタム名を定義し、後からfont-feature-settings: fixed-width-numbers;のようにCSSプロパティから参照することが可能です。

このように定義されたカスタム名は、font-feature-settingsやfont-variant-alternatesといった関連するCSSプロパティを通じて適用され、ウェブページのフォント表示に影響を与えます。@font-feature-valuesは、システムエンジニアを目指す初心者の方々が、ウェブコンテンツの視覚的な表現力を向上させる上で、フォント設定をより直感的に管理できる重要なツールです。

Copy
1@font-feature-values "Font Name" {
2  @swash {
3    custom-swash-1: 1;
4    custom-swash-2: 2;
5  }
6  @stylistic {
7    custom-style-1: 1;
8  }
9}

引数なし

引数はありません

戻り値なし

戻り値はありません