【Webフォント】Noto Sans CJK？ Noto Sans JP？違いは？

CJKは3つの言語の頭文字！

Noto Sans CJK
C(Chinese)、J(Japanese）、K(Korean)の全てが入っているフォントで、その中でJapaneseを優先的に表示するようにするもの。

Noto Sans JP
Japaneseのみのフォントが入っている。容量はもちろんCJKよりも小さい。

Webサイトでの表示方法

方法は2種類！cssに以下のコードを追加するか、html側のhead内にlinkタグを追加する

パターン1:cssの中で呼び出す方法

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

パターン2:htmlのhead内で呼び出す方法

<linkhref="http://fonts.googleapis.com/earlyaccess/notosansjp.css">

上記どちらのパターンでも、cssのクラスでいつでもフォント指定できるようにセットすれば表示可能です！

例) notojpというクラス名にした場合、

/*notojpというクラスに指定する場合*/.notojp {
    font-family: 'Noto Sans JP', sans-serif;
}

太さは9種類！

font-weight の指定

Noto Sans JPフォントの太さは7種ありますので、CSSファイルで以下のようなfont-weightの指定を行います。

/*.weight〇〇〇というクラスで管理すると*/.weight100{font-weight:100}
.weight300{font-weight:300}
.weight400{font-weight:400}
.weight500{font-weight:500}
.weight600{font-weight:600}
.weight700{font-weight:700}
.weight900{font-weight:900}

表示させた例

これがweight:100です！

これがweight:300です！

これがweight:400です！

これがweight:500です！

これがweight:600です！

これがweight:700です！

これがweight:900です！

今日の1曲はクールなダークサイケです！