web-dev-qa-db-ja.com

FirefoxでWebフォントの醜い非ClearTypeレンダリングを無効にせずに修正するにはどうすればよいですか?

Firefoxでのフォントレンダリングに問題があります。平滑化されたフォントが好きではないため(システムコントロールパネルのパフォーマンスセクションの[画面フォントの滑らかなエッジ]のチェックを外した)、Windows7でClearType/Font Smoothingを無効にしましたが、ダウンロード可能なWebフォントが多く使用されているようです。たとえば、私のブラウザで非常にひどくレンダリングされます。

Ugly non-cleartype font rendering

垂直線の一部(すべてではない)が太字で表示されていることに注意してください[ テキストのソース ]。

通常のフォントは正しくレンダリングされているように見えるので、これはダウンロード可能なWebフォントと関係があることを私は知っています。ダウンロードしたフォントを完全に無効にすることで、この問題を回避できます。

gfx.downloadable_fonts.enabled = false

ただし、フォントをダウンロードして正しくレンダリングすることをお勧めします。ダウンロード可能なWebフォントがフォントスムージングなしでうまくレンダリングされるようにFirefoxを構成するにはどうすればよいですか?

また、私が取り除こうとしている効果は何ですか?スムージングされたバージョンの見栄えを良くするためにフォントがレンダリングされているようですが、スムージングで無効になることはありません。 Chromeでも同様の問題が発生しています。

私は使っている:

  • Windows 7
  • Firefox 40
5
Kaypro II

ですから、最初に質問してから学んだ答えを投稿する必要があります。

tl; dr:フォントのスムージングなしで画面解像度で適切にレンダリングされるフォントを作成するにはコストがかかるため、ほとんどのWebフォントメーカーは試していません。フォントスムージングなしで、ひどくヒントされたフォントを許容できるように見せるための方法はありません。

中心的な問題は、画面上で見栄えのするフォントを作成するのは高価であるように見えることです。文字の形状は、任意の解像度にスケーリングできる数学的に定義された曲線として保存されますが、低解像度では、これらの曲線は適切なピクセルにうまく収まらないため、 フォントヒンティング と呼ばれるものが必要です。鮮明に表示します。フォントヒンティングは、手動、手動、または ttfautohint などのコンピュータプログラムによって自動で実行できます。

最良の結果は、手動でヒントを与えられたフォントからです。 Microsoftは、従来Windowsに含まれていたフォントを手動でヒントするために多額の費用を費やしたため、ClearType/FontSmoothingがなくても非常にきれいに表示されます。

自動的にヒンティングされるフォントは非常に劣っています。それらのほとんどは、低解像度で許容できる表示結果を得るために、ある種のClearType/Font Smoothingを必要とします。これは、生のフォームが、元の質問に含めたスクリーンショットのがらくたのように見え、2倍の太い線などがあるためです。

ほとんどのWebページは、ユーザーのコンピューターに既に存在するフォントを使用するように設計されており、通常は高品質であるため、これはそれほど大きな問題ではありませんでした。次に web fonts が発明されました。これにより、すべてのWebサイト設計者は、ユーザーの高品質のローカルフォントを無視し、代わりに、見た目が気に入った低品質のフォントを使用できます。これにより、 Iアイコンとロゴ などのカスタムフォントの使用も促進されました。

したがって、ClearType/Font Smoothingが嫌いで、標準解像度の表示がある場合は、表示しているWebページからフォントの選択を制御しようとしない限り、SOL)になります。テキストは通常​​、ローカルフォントで完全に正常にレンダリングされるため、困難で長い戦いになりますが、アイコンにはWebフォントが必要です。おそらく、ブラウザのフラグを使用してWebフォントを完全に無効にする必要はありません。役立ちます。

Chrome: フォントブロッカー 。このツールを使用すると、一部のテキストを右クリックして、使用するカスタムフォントをブロックできます。多くのウェブページで機能しますが、Googleのプロパティにますます問題があります。

Firefox: フォントブロッカーがfoxified 。このツールは上記と同じChrome拡張機能ですが、Firefox用にパッケージ化されています。同じように機能します。

誰かがWebフォントの広告ブロッカーのようなものを作成して、コミュニティが管理するフォント置換とページ修正のリストを使用して、アイコン以外のWebフォントなしでWebを簡単に閲覧できるようにしたいと思います。

最終的に、より高いディスプレイピクセル密度への移行は、この問題を解決します。

3
Kaypro II

悲しいことに、あなたはできません

ぼやけたフォントはデザインによってぼやけているため、シャープにしたい場合は無効にする必要があります(つまり、Arialのような古き良きフォントに置き換えます)。

ClearTypeは目を痛め、頭痛を引き起こすため、可能な限り無効にします。前回の更新以降に使用されていたファジー(Roboto?)フォントでは、GMailを読むことすらできなくなったため、最近私を救ったのは次のとおりです。
(何かを使えるようにするには、HTMLビューに戻らなければなりませんでした...)


ほとんどの場合ぼやけている派手なWebフォントを無効にする:
出典: http://annystudio.com/misc/anti-aliased-fonts-hurt/

-

Mozilla Firefox:

アドレスバーにabout:configと入力して開きます。
gfx.downloadable_fonts.enabledをfalseに設定します。

[ツール]-[オプション]-[コンテンツ]に移動して、すべてのフォントを選択したフォントに置き換えることもできます。

-

グーグルクローム

Chromeのランチャーアイコンを右クリックし、[プロパティ]を選択します。ランチャー文字列の最後に--disable-remote-fontsを追加します

-

私は試していませんが、Firefoxのソリューションには、一部のフォントを他のフォントに置き換える方法が含まれているようです。したがって、すべてのフォントを無効にするのではなく、おそらく高度にカスタマイズ可能な粒度で置き換えるだけです。
ところで、ぼやけるように設計されたほとんどのフォントは、置き換えない場合でもひどいものになります...しかし、それらのシャープなバージョンを見つけて(または設計して)そのような置き換えを構成すると、実際にはフォントを閉じることができますすべてを一括無効にすることなく、元のフォントに変換します。

ところで、あなたの投稿にはすでにFFソリューションが含まれていることに気づきましたが、それを探している人は両方のブラウザーのソリューションを同時に持つことに興味があるのではないかと思うので、そのままにしておきました。

1
Balmipour