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


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


　前ページの試行錯誤の中で、別途、目についたのが、「Noto Sans Mono CJK JP」。
　ダウンロードした気もないのに、使えた？？？
　（参考サイトのリンクは、リンク切れになりました）

　参考ページに、よれば「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」へ移行しました。
earthcar（アースカー）
Star　Naming　Gift