日本語Webフォントを最適化
そもそもなぜ
- フォントはそもそも機種依存
- 欧米フォントは、字数が限られている為ファイルサイズがそもそも小さい約250KB。しかし、日本語は16MBとか。（orz）なので、欧米フォントのようにheadにリンクをはって、アクセスごとにまるごとダウンロードすると重すぎる
んじゃどうするの
GoogleとAdobeが無料フォント「Noto Sans」作ってくれました。（これで無料でできます）
何が良くて、何が悪い
メリット
- 全ての環境で統一したフォントで表示ができる
デメリット
- ページ表示時の自前のフォントファイルダウンロード分の通信コストがかかる
導入手順
- まず「Noto Sans」をダウンロード
- サブセット化（普段使う文字だけ抜き出す）
- 各環境への対応のためにファイル形式を変える
- フォントをディレクトリーに設置し、CSSに@font-face記述をする *******************
1.「Noto Sans」をダウンロード
Noto Sans CJK<-ここからダウンロードを行ってください。
2.サブセット化
サブセット化＝普段使うものだけを抜き出す作業。「第一水準漢字＋ひらがな＋記号」この辺りを抜き出せば普通のwebサイトであれば十分にまかなえるでしょう。 「第一水準漢字」などで検索すれば一覧などが出てきます。
＃「サブセットフォントメーカー」があるのでそれを使用。ダウンロードしたフォントファイルを指定して、サブセット化されたものの吐き出し先を指定します。そしてどの文字をサブセット化するかを入力します。そこに「第一水準漢字＋ひらがな＋記号」を記入（コピペ）すればいいです。詳しくは「サブセットフォントメーカ 使い方」などで検索すれば出てきます。
3.ファイル形式を変える
フォントにもそれぞれの環境で対応したファイル形式があるので、それぞれ変換してやります。
＃「WOFFコンバータ」を使用。
対応形式
- .woff（主にブラウザ）「.woff」--Can I use
- IE9〜
- Chrome6〜
- Firefox3.6〜
- iOS5.0〜
- AndroidBrowser4.4〜
- .ttf（主にスマホ）「.ttf」--Can I use
- iOS4.2〜
- Android2.2〜 (Can I use 参照)
4.フォントをディレクトリーに設置し、CSSに@font-face記述をする
@font-faceは
@font-face は、Web ページを製作者が期待した通り描画するためにダウンロードされるべき、Web フォントを指定するための @ 規則を提供します。（MDNより）
要するに、font-family で自前のフォントを指定できるようにする。（という自分の認識です）ブラウザの対応状況は（「@font-face」--Can I use）
記述例
@font-face {
font-family: "NotoSansCJKSC";//ここは好きな名前でOK
font-style: "normal";
font-weight: 400;
src: url("./assets/fonts/NotoSans_regular.otf") format("opentype"),//ここにフォントファイルの指定とそのフォーマットを記述
url("./assets/fonts/NotoSans_regular.woff") format("woff");
}
以上のように指定すると、font-family: "NotoSansCJKSC;と指定すると使うことができます。font-weight: bold;で使いたいときは、
@font-face {
font-family: "NotoSansCJKSC";
font-style: "normal";
font-weight: 700; //変更
src: url("./assets/fonts/NotoSans_bold.otf") format("opentype"),//boldのフォントファイルを指定
url("./assets/fonts/NotoSans_bold.woff") format("woff");
}