【CSS Modules】@font-feature-valuesアットルールの使い方
@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は、システムエンジニアを目指す初心者の方々が、ウェブコンテンツの視覚的な表現力を向上させる上で、フォント設定をより直感的に管理できる重要なツールです。
構文(syntax)
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}
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
CSS @font-feature-values でカスタムフォント機能名を定義する
1/* 2 * @font-feature-valuesルールは、OpenTypeフォントの特定の機能に 3 * 人間が読みやすいカスタム名を定義するために使用します。 4 * これにより、font-feature-settingsプロパティで数値の代わりにカスタム名を使えます。 5 */ 6@font-feature-values "Your OpenType Font Name" { /* 実際のOpenTypeフォント名に置き換えてください (例: "Gabriola", "Fira Code", "Noto Serif") */ 7 /* 8 * @swash は、フォントのスワッシュ（装飾的なひげや曲線）機能にカスタム名を定義します。 9 * 'on' はスワッシュ機能を有効にする値（通常は1）を意味します。 10 * 'off' はスワッシュ機能を無効にする値（通常は0）を意味します。 11 */ 12 @swash { 13 on: 1; 14 off: 0; 15 } 16 17 /* 18 * @styleset は、特定の代替文字のセット（スタイルセット）機能にカスタム名を定義します。 19 * 'alternate1' はスタイルセット1 (OpenTypeタグ: ss01) を有効にする値（通常は1）を意味します。 20 * 'alternate2' はスタイルセット2 (OpenTypeタグ: ss02) を有効にする値（通常は2の場合もありますが、フォント依存) を意味します。 21 */ 22 @styleset { 23 alternate1: 1; /* ss01 を有効にする */ 24 alternate2: 2; /* ss02 を有効にする (値はフォントの定義による) */ 25 } 26} 27 28/* 29 * 上記で定義したカスタム名を font-feature-settings プロパティで使用する例です。 30 * これにより、数値ではなく意味のある名前でフォント機能を制御できます。 31 */ 32.element-with-custom-font-features { 33 font-family: "Your OpenType Font Name", serif; /* @font-feature-values で指定したフォントファミリー名を指定 */ 34 font-size: 3em; /* 効果が分かりやすいように大きめのフォントサイズを設定 */ 35 line-height: 1.2; /* 行間を調整 */ 36 37 /* 38 * カスタム名 'on' と 'alternate1' を使って、スワッシュ機能とスタイルセット1を有効にします。 39 * この設定は、内部的には font-feature-settings: "swsh" 1, "ss01" 1; と同じ効果を持ちます。 40 * 複数のフォント機能を同時に適用する場合は、カンマで区切ります。 41 */ 42 font-feature-settings: "swsh" on, "ss01" alternate1; 43}
@font-feature-valuesルールは、OpenTypeフォントが持つ高度な装飾機能（例えば、文字の装飾的なひげや特定のデザインの文字セットなど）を、より直感的で読みやすいカスタム名（別名）で指定するために使用します。通常、これらの機能はfont-feature-settingsプロパティで数値とOpenTypeタグ（例: "swsh" 1）を使って設定しますが、このルールを使うことで、数値の代わりに「on」や「alternate1」のような意味のある名前を定義し、利用できるようになります。
具体的な使い方としては、まず@font-feature-valuesの後に、対象となるOpenTypeフォントのファミリー名を指定します。そのブロック内で、@swashや@stylesetといったサブブロックを使って、フォントの各機能に対するカスタム名とその機能に対応する数値（OpenTypeタグの値）を関連付けます。例えば、@swashブロックで「on」というカスタム名に「1」という値を対応させれば、スワッシュ機能を有効にする際に数値の「1」の代わりに「on」と記述できるようになります。
このように定義したカスタム名は、実際にCSSで要素にスタイルを適用する際に、font-familyプロパティで指定したフォントと共に、font-feature-settingsプロパティで使用します。例えば、font-feature-settings: "swsh" on, "ss01" alternate1; のように記述することで、スワッシュ機能と特定のスタイルセットを、数値ではなく定義したカスタム名で簡潔に有効にできます。これにより、複雑になりがちなフォント機能の設定コードが読みやすくなり、どのような効果が適用されているか一目で把握しやすくなります。このルール自体に直接の引数や戻り値はなく、指定したフォントに対して機能のカスタム名を定義する役割を持ちます。
このサンプルコードを利用する際は、いくつかの注意点があります。まず、@font-feature-valuesで指定するフォント名は、ウェブページで使用するOpenTypeフォントの正確な名前と完全に一致させる必要があります。フォント名が異なると機能が適用されません。また、このルールはOpenTypeフォントに特有の機能であり、すべてのフォントがスワッシュやスタイルセットなどの機能を持っているわけではありませんので、使用するフォントがこれらの機能に対応しているか事前に確認してください。
定義するカスタム名の値（例: on: 1;）は、フォントによって期待される数値が異なる場合があります。意図通りに機能しない場合は、フォントの仕様を確認すると良いでしょう。font-feature-settingsプロパティでは、"swsh" onのようにOpenTypeタグと定義したカスタム名をペアで指定することが必須です。この機能は比較的新しいため、対象ブラウザがサポートしているか確認することも重要です。