HTML - ウェブフォント - Noto Sans Mono CJK JP


 　クラウディア
1.　概要
2.　.css の記述
3.　試してみる 
1.　概要


　前ページの試行錯誤の中で、別途、目についたのが、「Noto Sans Mono CJK JP」。

　ダウンロードした気もないのに、使えた？？？

　「「Web フォント」を使って OS 依存しない日本語対応の等幅フォント Noto Sans Mono CJK JP を適用する - Corredor」を参考にさせていただいて。

　参考ページに、よれば「unpkg.org」という「CDN - Wikipedia」で配信されているのを利用する方法も書いてあります。

　ありがたく、パクらせていただくことといたします。


2.　.css の記述


　参考サイトを、まるパクリさせていただいて・・・。
　バージョンは、「1.0.0」より新しい「1.0.2」が出ているので、そちらを利用・・・。

　「.css」に



@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 100;
  src: local("NotoSansMonoCJKjp-Regular"),
       local("Noto Sans Mono CJK JP Regular"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 200;
  src: local("NotoSansMonoCJKjp-Regular"),
       local("Noto Sans Mono CJK JP Regular"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 300;
  src: local("NotoSansMonoCJKjp-Regular"),
       local("Noto Sans Mono CJK JP Regular"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 400;
  src: local("NotoSansMonoCJKjp-Regular"),
       local("Noto Sans Mono CJK JP Regular"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 500;
  src: local("NotoSansMonoCJKjp-Regular"),
       local("Noto Sans Mono CJK JP Regular"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 600;
  src: local("NotoSansMonoCJKjp-Regular"),
       local("Noto Sans Mono CJK JP Regular"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Regular.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 700;
  src: local("NotoSansMonoCJKjp-Bold"),
       local("Noto Sans Mono CJK JP Bold"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 800;
  src: local("NotoSansMonoCJKjp-Bold"),
       local("Noto Sans Mono CJK JP Bold"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.otf")   format("opentype");
}
@font-face {
  font-family: "Noto Sans Mono CJK JP";
  font-weight: 900;
  src: local("NotoSansMonoCJKjp-Bold"),
       local("Noto Sans Mono CJK JP Bold"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.woff2") format("woff2"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.woff")  format("woff"),
       url("https://unpkg.com/@neos21/japanese-monospaced-fonts@1.0.2/NotoSansMonoCJKjp-Bold.otf")   format("opentype");
}



　と、定義を記述。
　インストールやキャッシュ（あれ？キャッシュは別の話なのかしら？）がある場合は、これで、ダウンロードしないし、ダウンロードする際も、本サイトの非力な回線やルータを通さないわけだ。


3.　試してみる


　で、試してみますわ。



　「Noto Sans Mono CJK JP」は、こんな文字です。
　１２３４５６７８９０	←	全角１０文字
　12345678901234567890	←	半角２０文字
　「\」は、バックスラッシュなのか？円なのか？
　間に　全角空白




　「Noto Sans Mono CJK JP」「太字」
　１２３４５６７８９０	←	全角１０文字
　12345678901234567890	←	半角２０文字




　「Noto Sans Mono CJK JP」「斜体」
　１２３４５６７８９０	←	全角１０文字
　12345678901234567890	←	半角２０文字




　「Noto Sans Mono CJK JP」「太字」「斜体」
　１２３４５６７８９０	←	全角１０文字
　12345678901234567890	←	半角２０文字




　通常の状態と lighter で違いはあるのか？（これは、bold）
　通常の状態と lighter で違いはあるのか？（これが normal）
　通常の状態と lighter で違いはあるのか？（これが、lighter）
　通常の状態と lighter で違いはあるのか？（数字いれてみてもだめやった・・・）
　結論・・・ない。




　元々のものとは違うよね？

　元々の文字は、こんな文字です。（全体を変えたら、区別はつかなくなるが・・・）
　１２３４５６７８９０←全角１０文字
　12345678901234567890←半角２０文字
　「\」は、バックスラッシュなのか？円なのか？
　間に　全角空白


　うむ、なんか、悪くないので、本サイトの全面へ展開しちゃおう～っと。

　ってことで、2019年12月3日、「Noto Sans Mono CJK JP」へ移行しました。
ハイスピードプラン