Windowsにおけるブラウザで文字をキレイに表示する方法

Windows環境のブラウザでは、文字が汚い!と云うのが当たり前であった。昨今では、Windows 10 に関しては、昔に比べれば・・・と云うレベルまでにはなった。しかしながら、Linux環境と比較すると、差は歴然であることには変わりない。

そこで今回は、自分の好きなフォント (見栄えの良いと感じるフォント) をWindows環境にインストールして、そのフォントでブラウザ上の文字を表示することにした。

ここでは、Windows 10 環境、使用するブラウザはChrome系ブラウザかFirefox系ブラウザ (ユーザースタイルシートを設定するのに拡張機能を使用すると云う意味なので、当然ながら Internet Explorer でも設定で対応可能 [後述]、Edgeでも拡張機能が提供されている) 、そしてインストールするフォントは、「Noto Sans CJK JP」とした。

まずは見てみよう (スクリーンショットはChrome)、筆者のサイトをWindows環境で閲覧すると、本来「メイリオ」で表示されるが、今回の方策を講じると、「Noto Sans CJK JP」で表示 ↓ される。他のサイトでも同様に対応できる。

2018-01-08_18h12_08.png

どうですか?見栄えもよく、視認性に優れていると思いませんか?

では、実際の手順である。まずは、Google Noto Fonts からフォントをダウンロードして、ダウンロードしたファイルを解凍、出来上がったフォントファイルを [C:\Windows\Fonts] にコピーする。 (右クリック → インストール でも可能)

次に、ユーザースタイルシートの設定である。定番のブラウザ拡張機能である「Stylish」で設定すればよい。

2018-01-09_09h49_55.jpg

/* フォント置き換え */
@font-face { font-family: "メイリオ"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Meiryo"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Meiryo UI"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "MS PGothic"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "MS Pゴシック"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "MS Gothic"; src: local('Noto Sans CJK JP'); }
@font-face { font-family: "MS ゴシック"; src: local('Noto Sans CJK JP'); }
@font-face { font-family: "MS UI Gothic"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Yu Gothic"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "游ゴシック"; src: local("Noto Sans CJK JP"); }
@font-face { font-family: "Yu Gothic UI"; src: local("Noto Sans CJK JP"); }

意味はこうだ。各々のフォントで描画する際には、ローカル側 (インストールした) の「Noto Sans CJK JP」に置き換えて表示しろ!である。つまり、フォントが汚いと思ったら、使われているフォントで同様に記述すればよいのである。この場合に役立つ拡張機能は、Chromeなら ウェブサイトのフォント情報を表示するChrome拡張機能「WhatFont」: Jkun Blog である。実際にレンダリングに使用されているフォント名が簡単に分かる。

今回の対策で ”Windows環境でのブラウザの文字が・・・” は解決するだろう。

ただ、他にも方策は様々ある。手っ取り早い方法としては・・・Chromeなら、MacTypeと同じ効果Chrome拡張機能「Font Rendering Enhancer」: Jkun Blog、Firefoxなら、Firefoxで文字をきれいに表示する方法: Jkun Blog でも効果抜群である。簡単に対応できるので、どうぞお試しください。

※Internet Explorer でも、ユーザースタイルシートを設定すれば同じことである。mactypeを使わずに綺麗なフォントで表示する その3: Jkun Blog

※フォント関連の記事は、フォント: Jkun Blog こちらからどうぞ・・・。

admin
カテゴリ:ブラウザ
2018/01/08 19:29 | コメント (0)

◎この記事へのコメントは 0 件です。コメント欄を表示しますか?
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]


PR

カテゴリ
タグクラウド
最近のコメント
過去ログ
このブログについて
jkun-400x400.jpg インターネット, パソコン, スマホ, Windows, Linux, Android, 各種アプリ, ブラウザ, ブラウザ拡張機能, 携帯電話, 社会情勢, 韓ドラ, K-POP 関連の話題を取り上げます。ジャンルとしては幅広く、特定のカテゴリに特化したブログではありません。お時間がありましたら、どうぞお立ち寄りくださいませ。
筆者プロフィール