ピクセルフォントとする@ font-faceを使用する際にCSSでアンチエイリアシングを無効にすることが可能ですか?
-
20-09-2019 - |
質問
私は、ウェブ上のピクセルフォントを使用したいです。私はそれがすべてのブラウザがフォントにアンチエイリアスを適用しているがする@ font-faceを使っ含めています。私は、誰もがアンチエイリアシングを無効にする別の方法を考えることができ、これを無効にするCSSルールを見つけることができないよう?
解決
フォントのレンダリングがまだのように、私はあなたがCSSで行うことができますほとんどありません信じて、オペレーティングシステムやブラウザによって行わのでれます。議論では、いくつか提案されているCSSルールがあるかもしれません(私は言及を見てきました「フォント・スムーズ」またはそのような何か)が、CSS3で何もない、私の知る限りでは、とCSS2で間違いなく何もない。
他のヒント
この質問は古いですが、これだけの更新を与えたいと思っています。
caniuse.com に基づき、CSSプロパティはそれのためにありますが、から削除されましたCSS3のドラフト仕様。だから、標準のソリューションではありません。 いくつかのWebkit、Firefoxの&オペラのブラウザでは、それをサポートするが、それは矛盾しています。これは、主にデスクトップのために働くとMac OSユーザー
-webkit-font-smoothing: none || antialiased || subpixel-antialiased
-moz-osx-font-smoothing: auto || inherit || unset || grayscale
font-smoothing: auto || inherit || unset || grayscale
私は、CSSはアンチエイリアシングのためのオプションを持っているとは思いません。代わりに、cufonをお試しください: https://github.com/sorccu/cufon/wiki/aboutする
これは、使用して非常に簡単です、それは非常によくあなたのピクセルフォントをレンダリングします。あなたはまた、ショーン・インマンのPxfonに興味があるかもしれません。 http://shauninman.com/archive/2009/04/17/pxr_cufon_pxfon
(8、16、24、など。)あなたは8PT複数のサイズにそれらを使用している場合だけで正常に動作しませんピクセルフォントのほとんどは
あなたは間違ったフォントサイズで作業する場合は、あなたはエイリアス/霧の文字を取得することになります。
これをチェックしてください...
http://www.fontsquirrel.com/fonts/list/style/Pixel >
...それが役立つかもしれない;)
私は今日、同様の問題を持っていたし、のフォント-スムーズの現代Firefoxで動作しません*がすることは、いくつかのフィルタを追加しないと思われます:
filter: contrast(1);
しかし、フィルタとアンチエイリアシングを無効にするには少しハックのようです。ちなみに、それは完全にアンチエイリアシングを無効にすることはありません。ただ、それは何らかの形で異なったので、ビットマップフォントが正しくレンダリングに適用されます。一方、非ビットマップフォントのレンダリングを壊します。
* http://doir.ir/fixedsys/demo.html、Iceweaselの38.40.0で、Debianの8でます。