web-dev-qa-db-ja.com

FirefoxとOperaのWebフォント平滑化とアンチエイリアス

私のサイトにはカスタムメイドのウェブフォントが埋め込まれています。

//-webkit-text-stroke-width: .05px;
//-webkit-text-stroke-color: white;
-webkit-font-smoothing: antialiased;

私のレンダリング出力をスタイルするため。これはSafariとChromeでは問題なく動作します。私は、よりシャープなエッジと細い線を得ることができます。

Firefoxでそのようなことをする方法はありますか？それともオペラ？

csscss3fontsantialiasingwebfonts
111
matt

バージョン15.0以降のOperaはBlinkを搭載しているため、-webkit-font-smoothing: antialiasedはOperaでも動作します。

Firefoxはついにグレースケールアンチエイリアスを有効にするプロパティを追加しました。久しぶりに ディスカッション それは別の構文でバージョン25で利用可能になるでしょう。それはこのプロパティがOS Xでのみ機能することを指摘しています。

-moz-osx-font-smoothing: grayscale;

これはぼやけたアイコンフォントや暗い背景上の明るいテキストを修正するはずです。

.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

あなたは OSXでのフォントレンダリングに関する私の投稿 を読むことができます。

191
Maximilian Hoffmann

まあ、Firefoxはそのようなものをサポートしていません。

Mozillaのリファレンスページでは、フォントのレンダリング時にCSSプロパティがアンチエイリアスの適用を制御するのでfont-smoothを指定していますが、このプロパティはこの仕様から削除されており、現在標準トラックにはありません。

このプロパティはWebkitブラウザでのみサポートされています。

あなたが代わりをしたいならば、あなたはこれをチェックすることができます：

15
Jonathan Naguin

ケース：暗い背景のFirefox（v35）/ Windowsでギザギザのwebフォントを使用した明るいテキスト
例： Google Web Font Ruda

驚くべき解決策 -
適用されたセレクタに以下のプロパティを追加します。

selector {
    text-shadow: 0 0 0;
}

実際、結果はtext-shadow: 0 0;と同じですが、ぼかし半径を明示的に設定するのが好きです。

それは普遍的な解決策ではありませんが、場合によっては役立つかもしれません。さらに、私はこれまでこのソリューションによるパフォーマンスへの悪影響を経験していません（これも徹底的にテストされていません）。

10
Volker E.

問題にぶつかった後、私は自分のWOFFファイルが適切に行われていないことを知り、私は新しいTTFを FontSquirrel に送りました。 。

7
azenet

私はこのリンクで解決策を見つけた： http://pixelsvsbytes.com/blog/2013/02/Nice-web-fonts-for-every-browser/

ステップバイステップ方式：

  • フォントをWebFontGeneratorに送信してZipを取得します。
  • zipファイルでTTFフォントを見つける
  • 次に、Linux上で次のコマンドを実行します（またはapt-get install ttfautohintでインストールします）。
    ttfautohint --strong-stem-width=g neosansstd-black.ttf neosansstd-black.changed.ttf
  • 次に、もう1つ、WebFontGeneratorで新しいTTFファイル（neosansstd-black.changed.ttf）を送信します。
  • あなたはすべてのWebフォントで完璧なZipを手に入れることができます！

これが役立つことを願っています。

5
Plici Stéphane

...本文とこれらのコンテンツと書体からこれらは一般的によく見えます...

body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-rendering: optimizeLegibility;
text-rendering: geometricPrecision;
font-smooth: always;

font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;
}


#content {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

}
4
user3634787

テキストの色が濃いときは、SafariとChromeでは、text-strokeのcssプロパティを使用したほうが良い結果が得られます。

-webkit-text-stroke: 0.5px #000;
3
Christelle