palm84.com

革命的愛熊主義者同盟!

OpenType フォントの表示テスト

2021.4.1 移転しました...
  • このページの旧URLは
    • http://www10.plala.or.jp/palm84/css_memo_font_opentype.html

OpenType (.otf) だとWindowsでもそのままでまぁまぁですよね。表示テストです...

INDEX

OpenType フォントとは?(PostScript フォント形式)

サイドバー表示 on/off

OpenType は TrueType を発展させ、PostScript フォントの CFF/Type 2 形式のアウトラインデータも収録できるようにしたものである。

拡張子は、アウトラインデータが CFF (PostScript) 形式のものは「.OTF」(フォントコレクションは「.TTC」「.OTC」)、TrueType 形式のものは「.TTF」「.OTF」(フォントコレクションは「.TTC」)のいずれかとなる。

OpenType - Wikipedia

OpenType フォント(.otf ファイル)だと Windows でもそのままでブラウザ上でまぁまぁきれいに表示できますな。

表示テストの項目については下記の通りです。

表示テストの項目
font-familyあいうえお漢字Windows \ ゼロオーアイ小文字エルQ濁点カナ漢字長音漢数字
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

ゴシック系

  • スクリーンショット - ゴシック系 on Windows 10 Microsoft Edge
f:id:palm84:20210116015143p:plain
  • スクリーンショット - ゴシック系 on Windows 10 Chrome47
f:id:palm84:20210116015147p:plain
  • スクリーンショット - ゴシック系 on Windows 10 MacType + Firefox43
f:id:palm84:20210116015151p:plain
OpenType フォント - ゴシック系フォントを指定して表示 - クリックで表示オン/オフ

※ 完全じゃないです。font-family:フォント名,serif と指定してます。指定フォントがない環境及び足りない漢字は(※ 多分)Serif 設定のフォントで表示されます。

  • line-height : 1 1.5
OpenType フォント - ゴシック系
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Sans-serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
小塚ゴシック Pr6N M あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Textar あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
ぬかみそ あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
01フロップデザイン あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
ぼくたちのゴシック あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
ぼくたちのゴシック2
レギュラー
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
ぼくたちのゴシック2
ボールド
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
07やさしさゴシック あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
07やさしさゴシック手書き あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
07やさしさアンチック あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
07ロゴたいぷゴシック7 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

Adobe Source Han Sans (源ノ角ゴシック)/ Google Noto Fonts

  • スクリーンショット - 源ノ角ゴシック on Windows 10 Microsoft Edge
f:id:palm84:20210116015155p:plain
  • スクリーンショット -源ノ角ゴシック on Windows 10 MacType + Firefox43
f:id:palm84:20210116015159p:plain
源ノ角ゴシック フォントを指定して表示 - クリックで表示オン/オフ

※ 完全じゃないです。font-family:フォント名,serif と指定してます。指定フォントがない環境、指定フォントが認識されない場合、及び足りない漢字は(※ 多分)Serif 設定のフォントで表示されます。

OpenType フォント- 源ノ角ゴシック
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Sans-serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック JP あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
ExtraLight あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Light あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Normal あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Medium あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Bold あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Heavy あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

Firefox で DirectWrite 使用時は 'Regular' など指定ができないようですfont-weight の指定は可能でした。

【2021.1.21 追記】英語名を指定すればおkでした。(例: 'Source Han Sans Regular')

源ノ角ゴシック font-weight を指定して表示 - クリックで表示オン/オフ
OpenType フォント- 源ノ角ゴシック font-weight 指定
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック (100) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック (300) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック (350) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック (400) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック (500) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック (700) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック (900) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
CSSで指定

※ CSSで font-family を指定する際は、ブラウザ・DirectWrite の設定状態及び指定フォント名により表示に差異がかなりあるので注意が必要です。

源ノ角ゴシック CSS指定テスト - クリックで表示オン/オフ
OpenType フォント- 源ノ角ゴシック CSS指定テスト
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Source Han Sans あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Source Han Sans Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
SourceHanSans-Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
1. 源ノ角ゴシック Regular
2. 源ノ角ゴシック
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
1. Source Han Sans Medium
2. 源ノ角ゴシック
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック JP CSS指定テスト - クリックで表示オン/オフ
OpenType フォント- 源ノ角ゴシック JP CSS指定テスト
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック JP あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Source Han Sans JP あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック JP Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Source Han Sans JP Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
SourceHanSansJP-Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
1. 源ノ角ゴシック JP Regular
2. 源ノ角ゴシック JP
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
1. Source Han Sans JP Medium
2. 源ノ角ゴシック JP
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP フォントを指定して表示 - クリックで表示オン/オフ
OpenType フォント- Noto Sans CJK JP
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Thin あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Light あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
DemiLight あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Medium あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Bold あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Black あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP font-weight を指定して表示 - クリックで表示オン/オフ
OpenType フォント- Noto Sans CJK JP font-weight 指定
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP (100) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP (300) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP (350) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP (400) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP (500) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP (700) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans CJK JP (900) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

Source Han Code JP(源ノ角ゴシック Code JP)

  • スクリーンショット - 源ノ角ゴシック Code JP on Windows 10 Microsoft Edge
f:id:palm84:20210116015204p:plain
  • スクリーンショット -源ノ角ゴシック Code JP on Windows 10 MacType + Firefox43
f:id:palm84:20210116015208p:plain
源ノ角ゴシック Code JP の表示テスト - クリックで表示オン/オフ

※ 完全じゃないです。font-family:フォント名,serif と指定してます。指定フォントがない環境、指定フォントが認識されない場合、及び足りない漢字は(※ 多分)Serif 設定のフォントで表示されます。

OpenType フォント- 源ノ角ゴシック Code JP
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
monospace あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ等幅 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック
Code JP
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
ExtraLight あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Light あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Normal あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Regular あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Medium あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Bold あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Heavy あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
EL あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
L あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
N あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
R あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
M あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
B, R B, R Bold あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
H あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

Firefox で DirectWrite 使用時は 'Regular' など指定ができないようですfont-weight の指定は可能でした。

【2021.1.21追記】短縮(?)指定すればおkでした。(例: 'Source Han Code JP R')

源ノ角ゴシック Code JP font-weight を指定して表示 - クリックで表示オン/オフ
OpenType フォント- 源ノ角ゴシック Code JP font-weight 指定
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
font-weight:100 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
font-weight:300 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
font-weight:350 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
font-weight:400 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
font-weight:500 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
font-weight:700 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
font-weight:900 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

Adobe Source Han Sans HW(源ノ角ゴシック HW)

monospace(等幅)版も出てました。

  • スクリーンショット - 源ノ角ゴシック HW on Windows 10 Microsoft Edge
f:id:palm84:20210116015213p:plain
  • スクリーンショット - 源ノ角ゴシック HW on Windows 10 MacType + Firefox43
f:id:palm84:20210116015217p:plain
源ノ角ゴシック HW フォントを指定して表示 - クリックで表示オン/オフ

※ 完全じゃないです。font-family:フォント名,serif と指定してます。指定フォントがない環境、指定フォントが認識されない場合、及び足りない漢字は(※ 多分)Serif 設定のフォントで表示されます。

OpenType フォント - 源ノ角ゴシック HW
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
monospace あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック HW あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Sans Mono
CJK JP
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ等幅 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ角ゴシック
Code JP
あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

RobotoJフォント

Androidの標準のフォント「Roboto」に、日本語フォントを合成・改変して作成しました。 Roboto+日本語(J)という事で、RobotoJと命名しました。

組み合わせた日本語フォントは、モトヤLシーダ3等幅、源真ゴシック、Miguフォント、およびM+ OUTLINE FONTSになります。

RobotoJ-Font プロジェクト日本語トップページ - OSDN

RobotoJフォントは以下の4種類となります。

  • RobotoJ → 通常フォント
  • RobotoJS → 通常フォントのゼロ「0」にスラッシュを付けた物です
  • RobotoJAA → AA(アスキーアート)を表示するためのフォントです。
  • RobotoJ Mono → 等幅のフォントです。
RobotoJ-Font プロジェクト日本語トップページ - OSDN
  • スクリーンショット - RobotoJフォント(.otf) on Windows 10 Microsoft Edge
f:id:palm84:20210116015222p:plain
  • スクリーンショット - RobotoJフォント(.otf) on Windows 10 MacType + Firefox51
f:id:palm84:20210116015226p:plain
RobotoJ フォントを指定して表示 - クリックで表示オン/オフ

※ 完全じゃないです。font-family:フォント名,serif と指定してます。指定フォントがない環境、指定フォントが認識されない場合、及び足りない漢字は(※ 多分)Serif 設定のフォントで表示されます。

OpenType フォント - RobotoJフォント
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
monospace あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
RobotoJ あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
RobotoJS あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
RobotoJAA あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

明朝体

  • スクリーンショット - 明朝体 on Windows 10 Microsoft Edge
f:id:palm84:20210116015231p:plain
  • スクリーンショット -明朝体 on Windows 10 MacType + Firefox43
f:id:palm84:20210116015235p:plain
明朝体 フォントを指定して表示 - クリックで表示オン/オフ

※ 完全じゃないです。font-family:フォント名,sans-serif と指定してます。指定フォントがない環境及び足りない漢字は(※ 多分)sans-serif 設定のフォントで表示されます。

  • line-height : 1 1.5
OpenType フォント- 明朝体
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
小塚明朝 Pr6N R あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
うつくし明朝体 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
はんなり明朝 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
こころ明朝体 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

Adobe Source Han Serif(源ノ明朝)/ Google Noto Serif CJK

  • スクリーンショット - 源ノ明朝 on Windows 10 Microsoft Edge
f:id:palm84:20210116015239p:plain
  • スクリーンショット -源ノ明朝 on Windows 10 MacType + Firefox52
f:id:palm84:20210116015244p:plain
源ノ明朝 フォントを指定して表示 - クリックで表示オン/オフ

※ 完全じゃないです。font-family:フォント名,sans-serif と指定してます。指定フォントがない環境、指定フォントが認識されない場合、及び足りない漢字は(※ 多分)sans-serif 設定のフォントで表示されます。

OpenType フォント- 源ノ明朝
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Sans-serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 ExtraLight あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 Light あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 Medium あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 SemiBold あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 Bold あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 Heavy あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

Firefox で DirectWrite 使用時は 'Regular' など指定ができないようですfont-weight の指定は可能でした。

【2021.1.21 追記】英語名を指定すればおkでした。(例: 'Source Han Serif Regular')

font-weight の指定は可能でした。

源ノ明朝 font-weight を指定して表示 - クリックで表示オン/オフ
OpenType フォント- 源ノ明朝 font-weight 指定
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 (100) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 (300) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 (400) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 (500) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 (600) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 (700) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
源ノ明朝 (800) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP フォントを指定して表示 - クリックで表示オン/オフ
OpenType フォント- Noto Serif CJK JP
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Sans-serif あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP ExtraLight あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP Light あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (Regular) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP Medium あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP SemiBold あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP Black あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP font-weight を指定して表示 - クリックで表示オン/オフ
OpenType フォント- Noto Serif CJK JP font-weight 指定
font-familyあいうえお漢字Windows \ ゼロOiIlQプブカ力エ工ロ口ー一ニ二
無指定 あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (100) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (300) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (400) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (500) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (600) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (700) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Noto Serif CJK JP (800) あいうえお 葛噌一二三語漢字片 Windows \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

表示テスト

JavaScript 初心者なので内容未保証ですけど...


表示テスト
Sans-serif あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
monospace あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
無指定 あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
テスト あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
新しい朝が来た!不埒な草彅剛、髙濱、味噌汁。~カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た!不埒な草彅剛、髙濱、味噌汁。~カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た!不埒な草彅剛、髙濱、味噌汁。~カ力エ工ロ口ー一ニ二フプブ ※→↑

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。
味噌汁 - Wikipedia


表示テスト
Sans-serif あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
Serif あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
monospace あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
無指定 あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二
テスト あかさたな 葛噌彅埒一三語漢片 MWayg9~*@ \ 0 O iI l Q プブ カ力エ工ロ口ー一ニ二

0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
新しい朝が来た!不埒な草彅剛、髙濱、味噌汁。~カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た!不埒な草彅剛、髙濱、味噌汁。~カ力エ工ロ口ー一ニ二フプブ ※→↑
新しい朝が来た!不埒な草彅剛、髙濱、味噌汁。~カ力エ工ロ口ー一ニ二フプブ ※→↑

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。

日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁をとり、食材と味噌で味を作るという、調理法としては単純な料理であるが、出汁・味噌に加え具材も各家庭・調理者によって千差万別であるため、おふくろの味と称される事もあり、作り方は様々である。また、各地で古くから作られており、名物料理だったり町おこしの料理ともされる。
味噌汁 - Wikipedia

ブックマークレット

JavaScript 初心者なので内容未保証ですけど... XPのIE8でも使える筈です。

body要素に適用なのでCSSで指定されてる要素には効きません。

body 要素に style 属性を追記します。

<body style="font-family: '07やさしさゴシック';">

備考

最終更新日:2017.4.4

2014.01.16 怨霊と吐き溜は TrueType でした。間違えました。すみません。。。
2014.01.16 表示テストをちょっと変更。
2014.01.19 スクリーンショットを追加。
2014.01.24 JavaScript をIE8で動く仕様に変更。CSSプロパティを追加。
2014.04.10 07ロゴたいぷゴシック7, ぬかみそフォント (nukamisoOTF), Textar, 不忘フェルトペン書体04 を追加。
2014.05.25 小塚ゴシック Pr6N M, 小塚明朝 Pr6N Rを追加。
2014.07.17 Adobe Source Han Sans源ノ角ゴシック)を追加。
2014.07.24 Adobe Source Han Sans源ノ角ゴシック)について表示テストを追記。
2014.09.23 Noto Sans CJK JP を追加。
2014.10.19 07やさしさゴシック手書き を追加。
2015.06.13 Source Han Code JP(源ノ角ゴシック Code JP) を追加。
2015.07.12 Source Han Code HW(源ノ角ゴシック HW)を追加。
2015.12.21 手書き風, 面白系を 手書き風フォントの表示テスト へ移動。
2015.12.22 ぼくたちのゴシック2レギュラー, ぼくたちのゴシック2ボールド, こころ明朝体 追加。
2017.01.27 RobotoJフォントを追加。
2017.04.04 源ノ明朝, Noto Serif CJK JPを追加。

小塚ゴシック Pr6N M (KozGoPr6N-Medium.otf), 小塚明朝 Pr6N R (KozMinPr6N-Regular.otf) は Adobe Reader のインストールフォルダ (C:\Program Files (x86)\Adobe\Reader 11.0\Resource\CIDFont) にありました。

ダウンロード・リンク

ほな