113

自分のサイトでカスタムメイドの Web フォントを使用しています。レンダリング出力のスタイルを設定するために、次のコードを使用しました。

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

これは Safari と Chrome で問題なく動作します (エッジがよりシャープになり、線がより細くなります)。Firefox と Opera で同じスタイルを実装する方法はありますか?

4

8 に答える 8

195

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

Firefox は、グレースケールのアンチエイリアシングを有効にするプロパティをついに追加しました。長い議論の後、このプロパティは OS X でのみ機能することが指摘されている別の構文を使用して、バージョン 25 で使用できるようになります。

-moz-osx-font-smoothing: grayscale;

これにより、ぼやけたアイコン フォントまたは暗い背景上の明るいテキストが修正されます。

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

両方のプロパティを処理する Sass mixin を含む、OSX でのフォント レンダリングに関する私の投稿を読むことができます。

于 2013-07-29T15:15:04.733 に答える
15

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

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

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

別の方法が必要な場合は、これを確認できます。

于 2012-07-12T20:27:55.727 に答える
11

ケース: 暗い背景にギザギザの Web フォントを使用した明るいテキスト Firefox (v35)/Windows
例: Google Web Font Ruda

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

selector {
    text-shadow: 0 0 0;
}

実際には だけで結果は同じですがtext-shadow: 0 0;、blur-radius を明示的に設定するのが好きです。

これは普遍的な解決策ではありませんが、場合によっては役立つかもしれません。さらに、これまでのところ、このソリューションのパフォーマンスへの悪影響は経験していません (完全にテストされていません)。

于 2015-02-06T22:50:51.240 に答える
7

問題が発生した後、WOFF ファイルが適切に作成されていないことがわかりました。FontSquirrelに新しい TTF を送信すると、余分な CSS を追加しなくても Firefox でスムーズな適切な WOFF が得られました。

于 2013-10-03T14:49:53.800 に答える
5

このリンクで解決策を見つけました: 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 を取得できます。

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

于 2014-09-05T17:32:02.503 に答える
4

...ボディタグとこれらのコンテンツと書体は、一般的に見栄えがよくなります...

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;

}
于 2015-01-02T17:58:28.047 に答える
-5

追加する

font-weight: normal;

@font-face フォントを使用すると、Firefox での太字の外観が修正されます。

于 2013-06-07T01:57:25.290 に答える