- 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」へ移行しました。
|