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

Tweet はてなブックマーク

目次

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

【2018.10.2 追記】Google Fonts を追加しました

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

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

  1. 選択したフォント
  2. Google Fonts(Web フォント)
  3. DirectWrite + Stylish Stylus
  4. 表示テスト
  5. 表示テスト - -webkit-text-stroke, text-shadow, transform
  6. ブックマークレット
  7. 備考

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

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

選択したフォント

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

Windows 10 Firefox50 64bit DirectWrite のスクリーンショット

RobotoJフォント on Windows 10 Firefox51 64bit DirectWrite(TTF) のスクリーンショット
RobotoJフォント on Windows 10 Firefox51 64bit DirectWrite(TTF-Hint) のスクリーンショット
RobotoJフォント on Windows 10 Firefox51 64bit DirectWrite(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 プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
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 プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二
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 と同じ筈です。

【追記】webkit (Chrome, Opera) では...

源ノ角ゴシック, Noto Sans CJK JP, Koruri、源真ゴシック, Mgen+ 1p については、ウェイト名なしで指定しないとだめなようなので、ファイル Preferences を直接編集する必要があるかも?

   "webkit": {
      "webprefs": {
         "fonts": {
            "standard": {
               "Zyyy": "源ノ角ゴシック"
            }

【追記】文字コードは UTF-8 で開く&保存するべし

Google Fonts(Web フォント)

Windows 10 Firefox62 64bit DirectWrite のスクリーンショット

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 プブ あいうえお 葛噌一二三語漢字片 カ力エ工ロ口ー一ニ二

DirectWrite + Stylish Stylus

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

【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;
}

Windows 10 Firefox50 64bit DirectWrite + Stylish のスクリーンショット

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

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

Windows 10 Firefox50 64bit DirectWrite + Stylish のスクリーンショット

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

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

表示テスト

※ Google Fonts(Web フォント)については、ダウンロードする(1個数MBぐらい?)のでモバイル環境など通信量に注意。

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

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

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

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

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

※ Google Fonts(Web フォント)については、ダウンロードする(1個数MBぐらい?)のでモバイル環境など通信量に注意。

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

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

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

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

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

ダウンロードする(1個数MBぐらい?)のでモバイル環境など通信量に注意。

備考

最終更新日:2019.04.14

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) のブックマークレット追記

ダウンロード・リンク

Valid CSS!