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」は、こんな文字です。
 1234567890	←	全角10文字
 12345678901234567890	←	半角20文字
 「\」は、バックスラッシュなのか?円なのか?
 間に 全角空白
 「Noto Sans Mono CJK JP」「太字」
 1234567890	←	全角10文字
 12345678901234567890	←	半角20文字
 「Noto Sans Mono CJK JP」「斜体」
 1234567890	←	全角10文字
 12345678901234567890	←	半角20文字
 「Noto Sans Mono CJK JP」「太字」「斜体」
 1234567890	←	全角10文字
 12345678901234567890	←	半角20文字
 通常の状態と lighter で違いはあるのか?(これは、bold)
 通常の状態と lighter で違いはあるのか?(これが normal)
 通常の状態と lighter で違いはあるのか?(これが、lighter)
 通常の状態と lighter で違いはあるのか?(数字いれてみてもだめやった・・・)
 結論・・・ない。
 元々のものとは違うよね?  元々の文字は、こんな文字です。(全体を変えたら、区別はつかなくなるが・・・)  1234567890←全角10文字  12345678901234567890←半角20文字  「\」は、バックスラッシュなのか?円なのか?  間に 全角空白  うむ、なんか、悪くないので、本サイトの全面へ展開しちゃおう~っと。  ってことで、2019年12月3日、「Noto Sans Mono CJK JP」へ移行しました。
earthcar(アースカー)
Star Naming Gift