Noto Sans JPは、Googleが開発した日本語フォントの一つで、多くのウェブサイトやアプリケーションで使用されています。
記事のタイトルそのままですが、最近このNoto Sans JPでfont-feature-settingsプロパティが問題なく機能するようになり、font-feature-settings: “palt”なども効くようになったことがわかりました。
font-feature-settingsとは？
font-feature-settingsは、OpenTypeフォントの高度な機能を制御するためのCSSプロパティです。このプロパティを使用することで、約物半角、プロポーショナルメトリクス、リガチャ、スモールキャップ、旧字体など、フォントに組み込まれた様々な機能をカスタマイズできます。
Noto Sans JPでの変更点
従来、Noto Sans JPではfont-feature-settingsの多くの機能が利用できませんでした。
私の環境でも、フォントがリリースされてからしばらくはfont-feature-settings：”palt”が効いていた → しかし、あるときを境に効かなくなった → 最近再びfont-feature-settings：”palt”が効くようになった、といった形です。
おそらく、Noto Sans JPを採用するサイトが増えたためにトラフィックを減らす等の理由で、フォントファイルからfont-feature-settingsを含むフォント情報を削除したのかなと推測しています。
とにかく、最新のアップデートによってfont-feature-settings：”palt”が効くようになったのは嬉しいニュースです。Webデザインでの日本語フォントの文字組みで、より細かな調整が可能となりました。
主な機能と使用
約物半角とプロポーショナルメトリクス
- 例：
font-feature-settings: "palt"; - 効果：記号や括弧類などの約物を半角するなど、全体の文字間のレイアウトを整える
プロポーショナル数字
- 例：
font-feature-settings: "pnum"; - 効果：文章中の数字の幅が均一でなくなり、より自然な印象に
スモールキャップ（アルファベット）
- 例：
font-feature-settings: "smcp"; - 効果：小文字を小さな大文字に変換
実装方法
たとえばfont-feature-settings: “palt”の場合、HTMLとCSSで以下のように指定します。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap" rel="stylesheet">.custom-text { font-family: 'Noto Sans JP', sans-serif; font-feature-settings: "palt";
}注意点
- ブラウザやデバイスによってサポート状況が異なる場合があります。
- パフォーマンスへの影響を考慮し、必要な箇所でのみ使用することをお勧めします。
まとめ
Noto Sans JPでfont-feature-settingsが効くようになったことで、より簡単に日本語テキストレイアウトの調整が可能となりました。
Googleの仕様変更により再度変更となる可能性もありますが、font-feature-settings: “palt”は効かなくなった場合でも特に不具合等は発生せず影響がほとんどないCSSプロパティのため、今まで諦めていた方はぜひお試しいただけると幸いです。
