2018年6月29日現在、ウェブフォントの「Noto Sans JP」で字詰めできなくなっていることを確認しました。
Googleが仕様を変更したのかもしれません。
"Noto Sans JP"のウェブフォントを利用すれば、すべての機器で文字表現を統一できます。
しかし、日本語のウェブフォントは容量が大きいです。
すでにローカルに"Noto Sans CJK JP"がインストールされているなら、ウェブフォントを読み込まずにそちらを利用したい。
そんな要望をかなえる方法です。
結論
"Noto Sans JP"のCSSにlocal("Noto Sans CJK JP <太さ>")を追加するだけです。
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
+ src: local("Noto Sans CJK JP Regular"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}
でもページは下記のように表示されるはずです。
以前は太さに関係なくNoto Sans CJK JPと指定するだけで自動で太さに対応してくれました。
しかし、現在では下記のように個別に指定する必要があります。
- src: local("Noto Sans CJK JP Thin"),
- src: local("Noto Sans CJK JP Light"),
- src: local("Noto Sans CJK JP Regular"),
@font-faceの解説 (MDN)
@font-faceのブラウザ対応状況 (Can I use)
"Noto Sans Japanese"は使わない
2018年6月29日現在、ウェブフォントの「Noto Sans JP」で字詰めできなくなっていることを確認しました。
Googleが仕様を変更したのかもしれません。
現在ウェブフォントとして提供されている"Noto Sans"の日本語フォントは下記の2種類があります。
後発の"JP"ならばCSSで字詰めできます。
| ウェブフォント | 特徴 |
|---|---|
| Noto Sans Japanese | 字詰めできない |
| Noto Sans JP | 字詰めできる |
両者の詳しい違いは下記を。
Google Fontsの日本語フォント「Noto Fonts」の使い方 | OXY NOTES
CSSのfont-feature-settingsプロパティによる字詰めについては下記を。
文字詰めできるCSSのfont-feature-settingsが凄い！ 日本語フォントこそ指定したい自動カーニング - ICS MEDIA
検証
ふたつのウェブフォントで字詰めができるかどうか、実際に確認します。
なお、"Noto Sans CJK JP"での確認もできます。(お使いの機器に"Noto Sans CJK JP"がインストールされている場合のみ)
下のスクリーンショットの赤枠のように、ウェブフォントの"Noto Sans JP"とローカルの"Noto Sans CJK JP"では字詰めが有効になるはずです。
ローカルの"Noto Sans JP"は使わない
ウェブフォントの"Noto Sans Japanese"をローカルにインストールすると、フォント名は"Noto Sans JP"となってしまうようです。
そのため、字詰めができるウェブフォントの"Noto Sans JP"と区別がつかなくなってしまいます。
せっかくなら確実に字詰めを有効にして全ての機器で同じ文字表現を実現したいので、今回はローカルの"Noto Sans JP"は使いません。
ただ、字詰めを使わないのであればlocal("Noto Sans JP")を追加できます。
下記のようになります。
@font-face {
font-family: 'Noto Sans JP';
font-style: normal;
font-weight: 400;
src: local("Noto Sans CJK JP"),
+ local("Noto Sans JP"),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff2) format('woff2'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.woff) format('woff'),
url(//fonts.gstatic.com/ea/notosansjp/v5/NotoSansJP-Regular.otf) format('opentype');
}