日本語のウェブフォントを利用する際、基本的な設計はガイドライン「【ウェブフォント】日本語ウェブフォントの軽量化」に沿って進める。以下はそれらを含むので重ねてになるが、Noto Sans CJK JPを採用する際の一連の流れと注意事項。
1.サブセット化
※Noto Sans CJK JPのサブセット版は「HiroyaYabiku/Noto-Sans-Japanese」で既に用意されているのでこちらを使う。
2.ウェイト(太さ)の選定
Noto Sans CJK JP ウェイト一覧
※ブラウザごとに太さが異なる症状を確認
Thin (100)
テキストサイズのサンプル。テキストサイズのサンプル。 |
Light (300)
テキストサイズのサンプル。テキストサイズのサンプル。 |
DemiLight (350)
テキストサイズのサンプル。テキストサイズのサンプル。 |
Regular (400)
テキストサイズのサンプル。テキストサイズのサンプル。 |
Medium (500)
テキストサイズのサンプル。テキストサイズのサンプル。 |
Bold (700)
テキストサイズのサンプル。テキストサイズのサンプル。 |
Black (900)
テキストサイズのサンプル。テキストサイズのサンプル。 |
3.ローカルフォントの指定
ユーザー環境によっては、既にNoto Sans JPという名称で端末にインストールされていることがある。その場合はインストール済みのフォントを読み込ませたほうが早いので、CSSのfont-face src でlocalで指定するようにする。
4.CSS用スタイル
以下はCSSで設定する際のテンプレート(ThinとRegularだけ設定する例)。
@font-face {
font-family: 'Noto Sans CJK JP';
font-style: normal;
font-weight: 100;
src: local('Noto Sans CJK JP Light'),
local('NotoSansCJKjp-Light'),
local('NotoSansJP-Light'),
url('/fonts/NotoSansCJKjp-Light.woff2') format('woff2'),
url('/fonts/NotoSansCJKjp-Light.woff') format('woff');
}
@font-face {
font-family: 'Noto Sans CJK JP';
font-style: normal;
font-weight: 400;
src: local('Noto Sans CJK JP Regular'),
local('NotoSansCJKjp-Regular'),
local('NotoSansJP-Regular'),
url('/fonts/NotoSansCJKjp-Regular.woff2') format('woff2'),
url('/fonts/NotoSansCJKjp-Regular.woff') format('woff');
}
5.バグ・不具合について
「Noto Sans Japaneseが、EdgeやIEで改行バグ」でも既に記載しているが、2019年1月現在でEdgeやIE11で改行部分にトーフ文字が表示される不具合が確認されている。その解消法は以下。CSSで対応する。
.br::before {
content: "\A" ;
white-space: pre ;
font-family: "serif";
}