以下の内容はhttps://www.palm84.com/entry/css_memo_font_select_testより取得しました。

【私的】Windows フォントのテストだYO！【DirectWrite】

フォント CSS ぷらら (旧@Palm84 )から引っ越し
  • このページの旧URLは
    • http://www10.plala.or.jp/palm84/css_memo_font_select_test.html

WindowsでMacTypeを使わずにフォントをLinux風に表示したいというテストです...

INDEX

about

サイドバー表示 on/off

【2016.12.7 追記】。
【2018.10.2 追記】。
【2021.01.16 追記】。
【2021.09.28 追記】。
【2021.11.27 追記】。
【2021.12.25 追記】。
【2022.04.07 追記】。

Windows の DirectWrite でまぁまぁイケそうなフォントの表示テストしますん。

Firefox の DirectWrite 設定については下記ページに書いとりました。

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

※スクリーンショットは Shift_JIS ページのものなので総称ファミリーで指定されるフォントに若干違いがあるかもです。

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

選択したフォント

ブラウザ（Firefox, Chrome）で読みやすそうなフォントを独断と偏見でチョイスしました。

  • スクリーンショット - on Windows 10 Firefox50 64bit DirectWrite

  • スクリーンショット - RobotoJフォント on Windows 10 Firefox51 64bit DirectWrite（上から TTF / TTF-Hint / OTF）



  • スクリーンショット - BIZ UDPゴシック R フォント on Windows 10 Firefox59 64bit DirectWrite

フォントを指定して表示 - クリックで表示オン/オフ
font-family \ ゼロOiIlQWindowsプブあいうえお漢字カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Sans-serif \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Serif \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Monospace \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

※ 完全じゃないです。font-family:フォント名,serif と指定してます。指定フォントがない環境では Serif 設定のフォントで表示されます。

font-family \ ゼロOiIlQWindowsプブあいうえお漢字カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Textar \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
MS PGothic \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
メイリオ \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Meiryo UI \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
游ゴシック \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
游ゴシック w500 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
游ゴシック Medium \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Yu Gothic UI \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Droid Sans Fallback \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
源ノ角ゴシック \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Noto Sans CJK JP \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
源真ゴシック \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Mgen+ 1p \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
07やさしさゴシック \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
07やさしさゴシック手書き \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Migu 1P \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Koruri \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
MMCedar P \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
nukamisoOTF \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Textar \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
RobotoJ \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
RobotoJAA \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
BIZ UDPゴシック \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

※ 游ゴシック w500 は font-weight:500 を指定、Medium と同じ筈です。

Google Fonts（Web フォント）

  • スクリーンショット - on Windows 10 Firefox94 64bit DirectWrite ()

  • スクリーンショット -

  • スクリーンショット - on Lubuntu 20.04 Firefox98

Google Fonts をダウンロードして表示

※ 通信料にご注意！Webフォントをダウンロードするブックマークレットです。（※ このページのみ表示可）

フォントを指定して表示 - クリックで表示オン/オフ

※ font-family:フォント名,serif と指定してます。指定フォントがダウンロードできないない環境では Serif 設定のフォントで表示されます。

font-family \ ゼロOiIlQWindowsプブあいうえお漢字カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Textar \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
メイリオ \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Yu Gothic UI \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Serif \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
M PLUS 1p \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
M PLUS Rounded 1c \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Kosugi \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Kosugi Maru \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Noto Sans JP \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Noto Serif JP \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Sawarabi Gothic \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Sawarabi Mincho \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Shippori Mincho \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Shippori Mincho B1 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
DotGothic16 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Kiwi Maru \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
New Tegomin \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Hina Mincho \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Kaisei Opti \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Kaisei Decol \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Kaisei HarunoUmi \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Kaisei Tokumin \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Klee One \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Yomogi \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
M PLUS 1 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
M PLUS 2 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
M PLUS 1 Code \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Murecho \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Yuji Syuku \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Yuji Mai \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Yuji Boku \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Zen Maru Gothic \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Zen Kaku Gothic New \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Zen Kaku Gothic Antique \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Zen Old Mincho \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Zen Kurenaido \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Zen Antique \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Zen Antique Soft \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
BIZ UDPGothic \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
BIZ UDGothic \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
BIZ UDPMincho \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
BIZ UDMincho \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

IBM Plex Sans JP

  • スクリーンショット - on Windows 10 Firefox94 64bit DirectWrite (TrueType hinted)

フォントを指定して表示 - クリックで表示オン/オフ

※ font-family:フォント名,serif と指定してます。指定フォントがダウンロードできないない環境では Serif 設定のフォントで表示されます。

font-family \ ゼロOiIlQWindowsプブあいうえお漢字カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
Sans-serif \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
IBM Plex Sans JP \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

DirectWrite + Stylish

Firefox50 64bit にて、DirectWrite 設定に拡張機能 Stylish を追加してユーザースタイルシートを設定してみました。MacType 使用時に近い表示になりました。

Stylish

。(´・ω・｀)

Stylish 設定はとりあえずこれだけで。-webkit-text-stroke-width 及び text-shadow を設定。

body {
-webkit-text-stroke-width: 0.1px;
text-shadow: 0 0 1px rgba(0,0,0,0.1), 0 0 2px rgba(0,0,0,0.01), 0 0 3px rgba(0,0,0,0.01) !important;
}
スクリーンショット - クリックで表示オン/オフ
  • スクリーンショット - on Windows 10 Firefox50 64bit DirectWrite + Stylish

  • スクリーンショット - RobotoJフォント on Windows 10 Firefox51 64bit DirectWrite（上から TTF / TTF-Hint / OTF）

  • スクリーンショット - BIZ UDPゴシック R フォント on Windows 10 Firefox59 64bit DirectWrite + Stylish

  • スクリーンショット - on Windows 10 Chrome55 64bit DirectWrite + Stylish

  • スクリーンショット - Robotoフォント on Windows 10 Chrome55 64bit DirectWrite + Stylish（上から TTF / TTF-Hint / OTF）



  • スクリーンショット - Google Fonts on Windows 10 Firefox94 64bit DirectWrite + Stylus

  • スクリーンショット - IBM Plex Sans on Windows 10 Firefox94 64bit DirectWrite + Stylus

表示テスト

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

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

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

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

表示テスト - -webkit-text-stroke, text-shadow, transform

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

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

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

ブックマークレット

function(){
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');
style.innerHTML='body,div,dl,dt,dd,p,li,caption,th,td,blockquote,q,cite,address,del,ins,span{font-family:\'Meiryo UI\'!important;}';
head[0].appendChild(style);})();

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

javascript:void(document.body.style.fontFamily='\'メイリオ\',Meiryo')
-webkit-text-stroke, text-shadow, transform

function(){
var style=document.createElement('style');
var head=document.getElementsByTagName('head');
style.setAttribute('type','text\/css');
style.innerHTML='body{-webkit-text-stroke-width:0.1px !important;}';
head[0].appendChild(style);})();

0123456789 \'"~*#$%&@ abcdefghijklmnopqrstuvwxyz
日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁を

下記は body 要素に style 属性を追記

function(){
document.getElementsByTagName('body')[0].style.setProperty('transform','rotate(0.01deg)','important');})
();
Web フォント を適用

ダウンロードする（1個数MBぐらい？）のでモバイル環境など通信量に注意。デフォルトフォントに指定します。

備考

最終更新日：2021.01.16

2014.07.25 作成。
2014.09.18 Google Noto Fonts (Noto Sans CJK JP) を追記。源ノ角ゴシックと殆ど同じですけど...
2014.10.03 源真ゴシック, Mgen+ 1P を追記。
2014.10.19 07やさしさゴシック手書き を追加。
2014.10.22 スクリーンショットを追加。
2016.12.07 Firefox50 にて、DirectWrite 設定 + 拡張機能 Stylish での表示を追加。
2016.12.07 游ゴシック w500 (Medium), Yu Gothic UI を追加。
2016.12.11 表示テストに transform プロパティ追記。
2017.01.27 RobotoJ, RobotoJAA を追加。
2017.01.28 RobotoJフォント TTF-Hint のスクリーンショットを追加。
2017.02.15 Stylish 関連のブックマークレットをちょっと変更
2018.03.16 BIZ UDPゴシック R を追加
2018.10.02 Google Fonts - M PLUS 1p, M PLUS Rounded 1c, Kosugi, Kosugi Maru, Noto Sans JP, Noto Serif JP, Sawarabi Gothic, Sawarabi Mincho を追加
2018.12.29 BIZ UD フォント の指定方法修正
2019.04.14 Web フォント (Google Fonts) のブックマークレット追記
2018.10.02 。
2021.01.16 。
2021.09.28 。
2021.11.27 。
2021.12.25 。
2022.04.07 。

ダウンロード・リンク

ほなね



以上の内容はhttps://www.palm84.com/entry/css_memo_font_select_testより取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます
不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14