【CSS Modules】font-feature-settingsアットルール記述子の使い方

Copy
1/*
2 * OpenTypeフォントのProportional Alternates (palt) 機能を有効にする例
3 *
4 * `font-feature-settings` は、OpenTypeフォントの高度なタイポグラフィ機能を制御するために使用します。
5 * `"palt"` は、プロポーショナルな代替グリフ（文字）を有効にするためのOpenTypeタグです。
6 * 日本語フォントなどで、文字ごとに最適な幅を適用し、より自然な表示にする際に役立ちます。
7 *
8 * この設定を適用するには、OpenType機能をサポートするフォント（例: Noto Sans JPなど）が
9 * システムにインストールされているか、ウェブフォントとして読み込まれている必要があります。
10 */
11.example-palt-text {
12  /* OpenType機能をサポートする日本語フォントを適用 */
13  font-family: "Noto Sans JP", "Hiragino Sans", sans-serif;
14  /* 'palt'タグを有効にし、プロポーショナルな代替グリフを使用する */
15  font-feature-settings: "palt";
16  /* フォントの文字詰めを有効にし、'palt'の効果を補完することが推奨される */
17  font-variant-east-asian: proportional-width;
18  /* 必要に応じて、より自然な文字間隔のためにletter-spacingを調整することもできます */
19  /* letter-spacing: -0.05em; */
20}

font-feature-settingsプロパティは、CSSにおいてOpenTypeフォントが持つ高度なタイポグラフィ機能を細かく制御するために使用されます。このプロパティは、フォントのデザインに含まれる特定の代替グリフ（文字の形）や配置の調整などを有効にする役割を持っています。

サンプルコードでは、"palt"という値を指定しています。これは「Proportional Alternates」（プロポーショナルな代替グリフ）を有効にするためのOpenTypeタグです。日本語フォントなどにおいて、文字ごとに最適な幅を適用することで、より自然で整ったテキストの表示を実現します。例えば、ひらがなや漢字、句読点などが、それぞれ最も美しく見える幅で配置されるようになります。

このプロパティ自体には、直接的な引数や戻り値の概念はありません。指定する値は、フォントベンダーによって定義されたOpenTypeタグ（文字列）であり、そのタグに対応するフォントの機能が有効になります。そのため、この機能を利用するには、OpenType機能をサポートしているフォントが適用されていることが必須となります。

また、サンプルコードにあるfont-variant-east-asian: proportional-width;と組み合わせることで、東アジア言語における文字詰めと相まって、"palt"の効果をさらに引き出し、読みやすいテキスト表現を可能にします。システムエンジニアとして、ウェブサイトやアプリケーションで高品質なタイポグラフィを実現する際に役立つ重要なプロパティの一つです。

Copy
1/*
2 * 数字を等幅（tabular figures）で表示するためのスタイルです。
3 * 表や時刻表示など、数字の桁を揃えたい場合に利用します。
4 */
5.element-with-tabular-numbers {
6  /*
7   * OpenTypeフォントを指定します。
8   * 指定したフォントが 'tnum' 機能をサポートしている必要があります。
9   */
10  font-family: 'Noto Sans JP', Arial, sans-serif;
11
12  /*
13   * font-feature-settings プロパティで OpenType の機能タグを直接指定します。
14   * "tnum" は、等幅数字（tabular figures）を有効にする機能タグです。
15   */
16  font-feature-settings: "tnum";
17
18  /*
19   * 注: 現代のCSSでは 'font-variant-numeric: tabular-nums;' が推奨されます。
20   * これは 'font-feature-settings: "tnum";' と同様の効果を持ち、より読みやすいです。
21   * ただし、特定のフォントや古いブラウザとの互換性を考慮する場合、
22   * またはより低レベルなOpenType機能の制御が必要な場合に 'font-feature-settings' が使用されます。
23   */
24}

CSSのfont-feature-settingsプロパティは、OpenTypeフォントが持つ高度な機能（フィーチャー）を直接制御するために使用されます。このプロパティ自体には関数のような引数や戻り値の概念はなく、フォントの特定の振る舞いを定義する「値」を設定します。スタイルシートとして記述されることで、要素のテキスト表示に直接影響を与えます。

サンプルコードでは、.element-with-tabular-numbersクラスに対して、font-feature-settings: "tnum";と指定されています。ここで"tnum"は、等幅数字（tabular figures）を有効にするOpenType機能タグです。通常、数字はそれぞれ異なる幅で表示されることがありますが、"tnum"を適用することで、0から9までのすべての数字が同じ幅で表示されるようになります。これにより、表形式のデータや時刻表示など、数字の桁を縦に揃えたい場合に、視覚的な整列と読みやすさを向上させることができます。

このプロパティは、指定されたfont-familyのフォントが"tnum"のような特定のOpenType機能をサポートしている場合にのみ効果を発揮します。現代のCSSでは、同様の目的でより直感的で読みやすいfont-variant-numeric: tabular-nums;プロパティが推奨されています。しかし、特定のフォントの低レベルなOpenType機能を細かく制御したい場合や、古いブラウザとの互換性を考慮する必要がある場合に、font-feature-settingsが利用されることがあります。