palm84.com

革命的愛熊主義者同盟!

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

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

f:id:palm84:20210114153748p:plain

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

INDEX

about

サイドバー表示 on/off

【2016.12.7 追記】Firefox50 にて、DirectWrite 設定 + 拡張機能 Stylish での表示を追加しました
【2018.10.2 追記】Google Fonts を追加しました
【2021.01.16 追記】Google Fonts を追加しました
【2021.09.28 追記】Google Fonts を追加しました

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

f:id:palm84:20210114153602p:plain

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

f:id:palm84:20210114153607p:plain
f:id:palm84:20210114153611p:plain
f:id:palm84:20210114153617p:plain

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

f:id:palm84:20210114153622p:plain

フォントを指定して表示 - クリックで表示オン/オフ
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 プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
MS Pゴシック \ 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 プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

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

Google Fonts(Web フォント)

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

f:id:palm84:20210928192918p:plain

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

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

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

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

font-family \ ゼロOiIlQWindowsプブあいうえお漢字カ力エ工ロ口ー一ニ二
無指定 \ 0 O iI l Q Windows プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
MS Pゴシック \ 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 プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

DirectWrite + Stylish Stylus

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

Stylish Stylus

【2018.8.4 追記】Stylish はやらかしたので下記の Stylus を使いませう(´・ω・`)

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

f:id:palm84:20210114153646p:plain

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

f:id:palm84:20210114153652p:plainf:id:palm84:20210114153657p:plainf:id:palm84:20210114153701p:plain

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

f:id:palm84:20210114153727p:plain

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

f:id:palm84:20210114153732p:plain

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

f:id:palm84:20210114153737p:plain
f:id:palm84:20210114153740p:plain
f:id:palm84:20210114153744p:plain

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

f:id:palm84:20210114153748p:plain

表示テスト

表示テスト
無指定 \ 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
日本の食文化において、主食とされる米飯や雑穀飯の副食として、主要な位置を占める。料亭や食堂で出される事も、家庭料理として家庭で作られる事もある、汁物料理の代表である。昆布・削り節や煮干しなどで出汁を

f:id:palm84:20210113210828j:plain

下記は 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) のブックマークレット追記
2021.01.16 Google Fonts を追加しました。

ダウンロード・リンク

ほなね