font-feature-settingsが効く日本語フォントと効かないフォント、見分け方から具体例までを徹底紹介

CSSのfont-feature-settingsプロパティは、フォントレイアウトを細かく制御することができるため、日本語Webサイトデザインでは特に欠かせない機能です。

しかし、すべてのフォントでこのプロパティが効果を発揮できるわけではありません。
この記事では、font-feature-settingsが効く日本語フォントと効かないフォントについて詳しく解説します。

font-feature-settingsとは
font-feature-settingsが効く日本語フォント
font-feature-settingsが効かない日本語フォント
font-feature-settingsの効果を確認する方法
font-feature-settingsを使用する際の注意点
まとめ

font-feature-settingsとは

font-feature-settingsは、OpenTypeフォントの高度なタイポグラフィ機能を制御するためのCSSプロパティです。このプロパティを使用することで、合字（リガチャ）、スタイル代替、数字の表示形式など、さまざまなフォントの機能を細かく調整できます。

CSSでの基本的な使用方法は以下の通りです。

CSS

.text { font-feature-settings: "liga" 1, "calt" 1;
}

この例では、合字（liga）と文脈代替（calt）を有効にしています。

font-feature-settingsが効く日本語フォント

font-feature-settingsが効果を発揮するのは、主にOpenTypeフォントです。OpenTypeフォントは、高度なタイポグラフィ機能をサポートする柔軟なフォント形式で、以下のような特徴があります。

多様な文字セットをサポート
高度なレイアウト機能
クロスプラットフォーム互換性

日本語フォントの場合、具体例では以下のフォントがfont-feature-settingsに対応しています。

源ノ角ゴシック（Source Han Sans）/ Noto Sans CJK / Noto Sans JP

AdobeとGoogleが共同開発した多言語対応フォント
豊富なウェイトとOpenType機能をサポート

游ゴシック（Yu Gothic）

Microsoft とType Projectが共同開発
Windows 8.1以降に標準搭載されている

ヒラギノ角ゴシック / ヒラギノ明朝

MacOSに搭載されている標準フォント
古いOSのバージョンではOpenType機能がサポートされていない場合があるため注意

これらのフォントは、font-feature-settingsを使用することで、プロポーショナル数字、スタイリスティック代替、JIS78/83/90字形など、さまざまな機能を制御できます。

font-feature-settingsが効かない日本語フォント

一方で、font-feature-settingsが効果を発揮しないフォントも存在します。主に以下のような特徴を持つフォントが該当します。

古い形式のフォント（TrueType, Type 1 など）
OpenType機能が実装されていないフォント
限られた文字セットしか持たないフォント

日本語フォントの中で、font-feature-settingsが効かない代表的な非対応フォントは以下になります。

MS明朝 / MS ゴシック

古くからあるWindowsのシステムフォントで、OpenType機能のサポートが限定的

メイリオ

Windows Vistaから搭載されているフォントで、一部のOpenType機能はサポートしているがfont-feature-settingsでの制御ができない

M PLUS 1 / M PLUS 2

Google Fonts及びAdobe Fontsでも提供されている日本語フォントだが、font-feature-settingsでの制御はできない

IPA明朝 / IPAゴシック

情報処理推進機構（IPA）が公開している無償フォント
基本的なOpenType機能は搭載しているが、font-feature-settingsでの制御はできない

一部のWebフォントサービスで提供されている軽量化フォント

ファイルサイズ削減のためfont-feature-settings機能を制限している場合がある

これらのフォントでは、font-feature-settingsを指定しても効果が現れません。

font-feature-settingsの効果を確認する方法

フォントがfont-feature-settingsに対応しているかどうかを確認するには、次の方法が有効です。

ブラウザの開発者ツールを使用する
CSSパネルでfont-feature-settingsプロパティを編集し、表示の変化を確認する
オンラインツールを利用する
Wakamai Fondueなどのツールを使用して、フォントの機能を詳細に分析する

font-feature-settingsを使用する際の注意点

font-feature-settingsを使用する際は、以下の点に注意が必要です。

ブラウザの互換性
一部の古いブラウザでは、このプロパティがサポートされていない場合がある
パフォーマンスへの影響
多数の機能を有効にすると、ページの読み込み速度に影響を与える可能性がある

まとめ

font-feature-settingsは、Webデザインにおけるタイポグラフィの可能性を大きく広げるプロパティです。OpenTypeフォントを使用することで、より細やかなデザイン調整が可能になります。一方で、すべてのフォントでこの機能が使えるわけではないため、プロジェクトに適したフォントを選択することが重要です。

適切なフォント選択とfont-feature-settingsの活用により、より読みやすくわかりやすい日本語フォントのレイアウトが可能になりますので、ぜひお試しいただければ幸いです。