移行作業中です...

はてなブログの該当ページへリダイレクトします。お手数をおかけします。ご容赦ください。

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

目次

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

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

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

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

• Windows版 Firefox の DirectWrite を設定してフォントを見やすくしてみたけどいまいちかなぁ。orz

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

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

• font 80% | font 90% | font 100% | font 110% | font 120% | font 150%
• font 80% | font 90% | font 100% | font 110% | font 120% | font 150%

選択したフォント

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

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

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

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

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

• Chrome - C:\Users\ユーザー名\AppData\Local\Google\Chrome\User Data\Default\Preferences
• Opera - C:\Users\ユーザー名\AppData\Roaming\Opera Software\Opera Stable\Preferences

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

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

Google Fonts（Web フォント）

• Google Fonts

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

DirectWrite + Stylish Stylus

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

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

• Stylus - Firefox 向けアドオン
• Stylus - Chrome ウェブストア

• Stylish :: Add-ons for Firefox
• Stylish - Chrome ウェブストア
• 拙作めも :
  • Firefox - 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;
}

表示テスト

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

• font-size 削除 | 80% | 100% | 110% | 120% | 150% | font-style 削除 | normal | italic | oblique
• line-height 削除 | 1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 2 | letter-spacing 削除 | 0 | 0.5px | 1px | 1.5px | 2px
• font-weight 削除 | lighter | normal | bold | bolder | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
• color 削除 | black | #595959 | white | background-color 削除 | white | #ffe | black
• style削除

• 削除
• メイリオ
• Meiryo UI
• ＭＳ Ｐゴシック
• MS UI Gothic

• 游ゴシック
• Yu Gothic UI
• 源ノ角ゴシック
• Noto Sans CJK JP
• 源真ゴシック
• Mgen+ 1P

• Droid Sans Fallback
• 07やさしさゴシック
• 07やさしさゴシック手書き
• Migu 1P
• Koruri
• BIZ UDPゴシック

• MMCedar P
• nukamisoOTF
• Textar
• RobotoJ
• RobotoJAA

• M PLUS 1p
• M PLUS Rounded 1c
• Kosugi
• Kosugi Maru

• Noto Sans JP
• Noto Serif JP
• Sawarabi Gothic
• Sawarabi Mincho

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

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

• -webkit-text-stroke-width 削除 | 0 | 0.1px | 0.2px | 0.3px
• text-shadow 削除 | none | 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) |
                    0 0 0.1px rgba(51,51,51,0.5) | 0 0 0.1px rgba(0,0,0,0.5) | #707070 0.05px 0.05px 0.05px |
                    transparent 0 0 0,rgba(0,0,0,0.5) 0 0 0
• transform 削除 | rotate(0.001deg) | rotate(0.05deg)
• font-weight 削除 | 500 || line-height 削除 | 1 | 1.1 | 1.2 | 1.5 | 2 || letter-spacing 削除 | 0 | 1px | 2px

• 削除
• メイリオ
• Meiryo UI
• ＭＳ Ｐゴシック
• MS UI Gothic

• 游ゴシック
• Yu Gothic UI
• 源ノ角ゴシック
• Noto Sans CJK JP
• 源真ゴシック
• Mgen+ 1P

• Droid Sans Fallback
• 07やさしさゴシック
• 07やさしさゴシック手書き
• Migu 1P
• Koruri
• BIZ UDPゴシック

• MMCedar P
• nukamisoOTF
• Textar
• RobotoJ
• RobotoJAA

• M PLUS 1p
• M PLUS Rounded 1c
• Kosugi
• Kosugi Maru

• Noto Sans JP
• Noto Serif JP
• Sawarabi Gothic
• Sawarabi Mincho

ブックマークレット

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

• style削除(x1)

• inherit (many) | sans-serif (many) | ＭＳ Ｐゴシック (many)

• メイリオ (many)
• Meiryo UI (many)
• 游ゴシック (many)
• 游ゴシック w500 (many)
• Yu Gothic UI (many)
• Droid Sans Fallback (many)
• RobotoJ (many)
• RobotoJAA (many)

• 07やさしさゴシック (many)
• 07やさしさゴシック手書き (many)
• Migu 1P (many)
• MMCedar P (many)
• nukamisoOTF (many)
• Textar (many)
• BIZ UDPゴシック (many)
• 源真ゴシック (many)
• Mgen+ 1P (many)
• Rounded Mgen+ 1p (many)

• 源ノ角ゴシック (many)
• 源ノ角ゴシック 100 (many)
• 源ノ角ゴシック 300 (many)
• 源ノ角ゴシック 350 (many)
• 源ノ角ゴシック 400 (many)
• 源ノ角ゴシック 500 (many)
• 源ノ角ゴシック 700 (many)
• 源ノ角ゴシック 900 (many)
• Noto Sans CJK JP (many)

• Koruri (many)
• Koruri 100 (many)
• Koruri 400 (many)
• Koruri 600 (many)
• Koruri 700 (many)
• Koruri 800 (many)

• M PLUS 1p (many)
• M PLUS Rounded 1c (many)
• Kosugi (many)
• Kosugi Maru (many)
• Noto Sans JP (many)
• Noto Serif JP (many)
• Sawarabi Gothic (many)
• Sawarabi Mincho (many)

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

javascript:void(document.body.style.fontFamily='\'メイリオ\',Meiryo')

• (body) style 削除
• inherit ( sans-serif | serif | monospace | cursive | fantasy ) ( monospace, 'ＭＳ ゴシック' | monospace, serif )

• メイリオ
• Meiryo UI
• 游ゴシック
• Droid Sans Fallback
• 源ノ角ゴシック
• Noto Sans CJK JP
• 源真ゴシック
• Mgen+ 1P
• Rounded Mgen+ 1p

• 07やさしさゴシック
• 07やさしさゴシック手書き
• Migu 1P
• Koruri
• MMCedar P
• RobotoJ
• RobotoJAA

• nukamisoOTF
• nukamiso
• Textar
• BIZ UDPゴシック

• M PLUS 1p
• M PLUS Rounded 1c
• Kosugi
• Kosugi Maru
• Noto Sans JP
• Noto Serif JP
• Sawarabi Gothic
• Sawarabi Mincho

• font 80%
• font 100%
• font 120%
• font 150%

• font 12px
• font 14px
• font 15px
• font 16px
• font 18px

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

• style削除(x1)

• ＭＳ Ｐゴシック を Textar に置換

• body{-webkit-text-stroke-width: 0.1px !important;}
• body{-webkit-text-stroke-width: 0.2px !important;}
• body{-webkit-text-stroke-width: 0.3px !important;}

• body{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;}
• body{text-shadow: 0 0 0.1px rgba(51,51,51,0.5) !important;}
• body{text-shadow: 0 0 0.1px rgba(0,0,0,0.5) !important;}
• body{text-shadow: #707070 0.05px 0.05px 0.05px !important;}

• body{transform: rotate(0.001deg);}
• body{transform: rotate(0.03deg);}
• body{transform: rotate(0.05deg);}

• body{transform: rotate(0.001deg);} img{transform: rotate(0deg)!important;}
• body{transform: rotate(0.03deg);} img{transform: rotate(-0.03deg)!important;}
• body{transform: rotate(0.05deg);} img{transform: rotate(-0.05deg)!important;}

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

function(){
document.getElementsByTagName('body')[0].style.setProperty('transform','rotate(0.01deg)','important');})
();

• 戻す
• transform: rotate(0.01deg)
• transform: rotate(0.03deg)
• transform: rotate(0.05deg)

Web フォント を適用

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

• Noto Sans JP
• Noto Sans TC
• Noto Sans SC

• M PLUS 1p
• M PLUS Rounded 1c

• Kosugi
• Kosugi Maru

• Sawarabi Gothic
• Sawarabi Mincho

• Noto Serif JP
• Noto Serif SC
• Noto Serif TC

• style削除(x1)

備考

最終更新日：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) のブックマークレット追記

ダウンロード・リンク

• Google Fonts

• Droid フォント, モトヤLシーダ3等幅 (MTLc3m), モトヤLマルベリ3等幅 (MTLmr3m) - Download Android Studio and SDK Tools | Android Developers
  • platform_frameworks_base/data/fonts at master ・ android/platform_frameworks_base ・ GitHub
• 源ノ角ゴシック Source Han Sans / Home / Home
  • adobe-fonts/source-han-sans at release ・ GitHub
• Google Noto Fonts

• フリーフォントやさしさゴシックのダウンロード | フォントな情報。オープンソースの安心フリーフォント（※ .otf ファイル同梱）
• やさしさゴシック手書きのフリーダウンロード | フォントな自由｜日本語フリーフォント無料ダウンロード
• Miguフォント : M+とIPAの合成フォント
• 小瑠璃フォント (koruri)
• UmePlus, Komatuna, Monapo, MMCedar - modified_fonts_01
• ぬかみそフォント - ダウンロード（β-reverse - 64DDポリゴンサイト）
• Textar Font - アスキーアート対応ウェブフォント（※ .otf ファイル同梱）
  • Textar - Google Code Archive - Long-term storage for Google Code Project Hosting.

• 自家製フォント工房
  • 源真ゴシック (げんしんゴシック) | 自家製フォント工房
  • Mgen+ (ムゲンプラス) | 自家製フォント工房

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

• MORISAWA BIZ+ | 株式会社モリサワ