日本語Webフォントの流行の最適化「NotoSans」「サブセット化」

#日本語Webフォントを最適化

##そもそもなぜ

1. フォントはそもそも機種依存
2. 欧米フォントは、字数が限られている為ファイルサイズがそもそも小さい約250KB。しかし、日本語は16MBとか。（orz）なので、欧米フォントのようにheadにリンクをはって、アクセスごとにまるごとダウンロードすると重すぎる

##んじゃどうするの
####GoogleとAdobeが無料フォント「Noto Sans」作ってくれました。（これで無料でできます）

##何が良くて、何が悪い
###メリット

• 全ての環境で統一したフォントで表示ができる

###デメリット

• ページ表示時の自前のフォントファイルダウンロード分の通信コストがかかる

##導入手順

1. まず「Noto Sans」をダウンロード
2. サブセット化（普段使う文字だけ抜き出す）
3. 各環境への対応のためにファイル形式を変える
4. フォントをディレクトリーに設置し、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");  
}

##まとめ
#####日本語も全ての環境で同じフォントが表示されるというのは、とても大きなメリットだと。「游ゴシック」だとなんか違うな、なんて時に使っていきたいです。
#####サブセット化に関しては、どこまでを範囲として指定するかは、ケースバイケースだと。静的コンテンツの場合は出てくる文字だけをサブセット化したりしました。
#######　追記「FONTPLUS」など日本語の有料サービスもあり、種類が豊富&勝手にサブセット化してくれるので、そちらも充実している。

######「Qiita」初投稿でした。至らぬ点があるかもしれません。ご了承ください。