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

Tweet はてなブックマーク

目次

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

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

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

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

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

表示テストの項目
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) のスクリーンショット

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

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

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

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

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

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

DirectWrite + Stylish

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

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) のスクリーンショット

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) のスクリーンショット

表示テスト

表示テスト
無指定 \ 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

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');})
();

備考

最終更新日:2017.1.28

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 関連のブックマークレットをちょっと変更

ダウンロード・リンク

Valid CSS!