意味悲鳴

PythonとかUnityとか.技術ブログでしたが,研究ブログにシフトしました.

ブラウザのフォントを綺麗にする方法メモ(Windows上のFirefox、Chrome)

タイトルの通り、ブラウザのフォントを綺麗にする方法をメモしておきます。別にデリケートな部分をいじったりすることはないのですが、いつもどおり、自己責任でお願いしますね。

 

ちなみに、OSはWindows10のHome、ブラウザはFirefoxが40.0.3、Chromeは45.0.2454.85 mでした。OSについては違うと多少問題点が出てくるかもしれませんが、ブラウザについては多分どちらもバージョンを合わせなくても問題ないと思います。

 

また、Chromeは仕様なのか何なのかわかりませんが、任意のフォントの設定を行ってもなんか綺麗にならないので、強制的にメイリオに変更する形でフォントを綺麗にします。メイリオ大嫌いな方には本当に申し訳ないのですが、ご了承ください。

 

下準備

そもそもの問題として、綺麗なフォントがPCにインストールされていないという問題点も考えられます。個人的におすすめなのは下記の2つです。

 

jikasei.me

 

IPAexフォント/IPAフォント

 

 

Firefoxでは、ゴシック体を源真ゴシック、明朝体をIPAex明朝で設定していますが、もちろんお好みのものを使用していただくのが一番だと思います。

 

 

Firefox

私のメインブラウザでもある火狐の設定です。手順はいたって単純で、以下のアドオンをぶっこんで設定するだけです。

 

addons.mozilla.org

 

このアンチエイリアシングチューナー(カタカナにするとダサい)を導入して、設定を以下のように変更します。

 

f:id:zyusou:20150906161921p:plain

 

上から3つのパラメータはそれぞれ自分で変更してページを見てを繰り返して、お好みの値を見つけてみてください。環境に応じてこの値がベストなポイントは変わってくると思うので、不愉快だと思いますが何回かやってみることをおすすめします。

 

最後に(もう最期なんですけど)、ページで用いられるフォントそのものを変更します。オプション → コンテンツ → フォント → 詳細設定を確認してください。

 

f:id:zyusou:20150906162335p:plain

 

こんな感じで出てくると思います。Webページのレイアウトが崩れる危険性があるので、基本的には使用するフォントを好みのものに変更するだけにしておいたほうがよいでしょう。場合によっては「Webページが指定したフォントを優先する」のチェックを外してもらっても構いませんが、やはりレイアウトが崩れたりWebフォントが表示されなくなったりするので、個人的にはおすすめしません。

また、画像では私が先ほどおすすめした源真ゴシックとIPAex明朝を設定してありますが、当然ここもお気に入りのフォントで置換してもらって問題ありません。

 

これでだいぶ綺麗になると思います。スクショで比較とかすればいいんでしょうけど面倒なのでやりません。ブラウザの設定を大幅に変えるわけでもないので、とりあえず試して感動してみてください。

 

 

Chrome

さて、個人的には問題児だと思っているChromeです。そもそもChromeはデフォルトでフォントの設定ができないという悲惨なブラウザなのですが、幸いなことにフォントを設定するアドオンが存在しています。

 

 

chrome.google.com

 

 

しかしながら、なぜかこのアドオンを導入してもフォントの設定はうまく反映されないので(多分なんかすれば反映されるんでしょうけど面倒)、とりあえず下記のアドオンを導入します。

 

 

chrome.google.com

 

このアドオンを導入することで、MSゴシックをブラウザから強制的に排斥します。基本的にフォントを設定する最大の目的って、ブラウザ側が指定しない場合にMSゴシックを消し去ることなので、このアドオンでも目的の半分ぐらいは達成できた、ということにしておきます。

 

次にブラウザ側のフォントレンダリング性能を良くするために、下記のアドオンを導入します。

 

chrome.google.com

 

こいつを導入して設定からこいつのパラメータをいじってあげます。設定 → 拡張機能 → Font Rendering Enhancer → オプションをクリック。するとこんなのが出てきます。

 

f:id:zyusou:20150906164158p:plain

 

なんかやたら殺風景な設定画面なんですが、真ん中のバーを操作することでパラメータを変更できます。これまた好みがあると思うのでお好きに変更してください。個人的には値を大きくし過ぎると太字が太くなりすぎて悲惨になるので、真ん中よりも少し少ないぐらい(私は40で設定しています)だとちょうどいいと思います。

 

 

そんなわけでブラウザのフォントを綺麗にする設定方法を書きました。比較画像ないのでほんとに良くなるかわからないって人もいると思いますが、びっくりするぐらい良くなるので是非どうぞ。特にFirefoxの方法はアドオンの設定の自由度がかなり高めですので、気にいるまでパラメータいじるのもいいかもしれません。というか、これがあまりにも綺麗に移してくれるのが原因でFirefoxからChromeに移行できないんですよね。

 

次回はUnityかPythonかなんかの勉強をして記事を書きたい。

 

 

DynaFont TypeMuseum 3728 TrueType Win/Mac

DynaFont TypeMuseum 3728 TrueType Win/Mac

 
FONT x FAN HYBRID 3

FONT x FAN HYBRID 3