FirefoxとOperaでのWebフォントのスムージングとアンチエイリアス

112

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

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

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

— つや消し
ソース

5

それをやめて、ここでその理由を読むのは良い考えです：usabilitypost.com/2012/11/05/stop-fixing-font-smoothing

— fregante

20

^これは広範な一般化であり、フォントスムージングを使用しても問題ありません。問題であるのはレンダリングの問題であり、デザイナーの動作ではありません。レイアウトをデザインし、レンダリングエンジンが原因でフォントがセミボールドに見える場合、レイアウトではなく、修正が必要なのはエンジンです。

— ディラン

1

それは完全に広い一般化ではありません。この記事によると、サブピクセルレンダリングは主に暗い背景の明るいテキストを読みやすく（つまり、アクセス可能に）するためのものであり、CSSの定義を広くするのbody { -webkit-font-smoothing: antialiased; }は重過ぎます。

— Matt Scheurich 2014

3

明るい背景上で暗い私のWebフォントも、「偽の太字」になっています。私は「アンチエイリアス」と言っています。

— Jason T Featheringham 2014年

5

ページの表示方法は、すべての活字属性を含め、デザイナー次第です。幅広いプラットフォームでの使いやすさ、一貫性、魅力を保証するのは彼らの責任です。CSSを介したフォントスムージング属性へのアクセスにより、より優れた制御が可能になります。何かのように、それは間違った手で誤用される可能性があります。しかし、質問に答えるのではなく、個人の哲学を売り込むことは役に立ちません。

— Beejor 2015

193

OperaはBlinkを搭載しているため、バージョン15.0 -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;
}

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

— マクシミリアンホフマン
ソース

6

なぜOSXだけですか？

— Yassir Ennazk 2013

7

WindowsとLinuxは、OSXとは異なるフォントのレンダリングアルゴリズムを使用します。

— Maximilian Hoffmann、

15

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

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

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

代替が必要な場合は、これを確認できます。

— ジョナサン・ナギン
ソース

2

まあ、私が持っている問題は、私のフォントが「太字」に見え、Firefoxとオペラで膨らんでいることです。-webkit-font-smoothing:antialiased;私はSafariとChromeでそれを修正することができます。Firefoxでもフォントを少し軽量化するための「ハック」を見つけたいと思います。text-shadowmozのみに白を適用することを考えましたが、フォントを明るくする「インセット」テキストシャドウを適用する方法はありません。

— マット

1

@mattあなたはこの質問でいくつかのCSSアドバイスを試すことができます：stackoverflow.com/questions/761778/…多分あなたはいくつかのCSSの代替を見つけるでしょう。

— ジョナサンナギン

11

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

驚くべきソリューション-
次のプロパティを適用されたセレクターに追加します：

selector {
    text-shadow: 0 0 0;
}

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

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

— フォルカーE.
ソース

助けに何もしない

— vsync

これにより、フォントに基づいたクロムのフォントがより太くなる

— Ben Sewards

1

@BenSewards大胆なフォントレンダリングを実行するために実行したフォントを提供しますか？それともCodePenですか？前もって感謝します。

— Volker E.

1

@VolkerE。素晴らしい解決策をありがとう。スティッキーヘッダーのソースコードプロフォントにも同じ問題があります。フォントをスクロールすると、フォントが非常に小さくなり、テキストシャドウでは、フォントは問題になりません。

— Evolutio

現在のクロム（58.0.3029.110）では、「滑らかな」テキストは実際には非常に恐ろしく見えます。（「ジャギー」テキストはやや良い）

— RecursiveExceptionException

7

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

— アゼネット
ソース

それは窓にありますか？

— Vignesh

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）を送信します。
あなたはすべてのあなたのウェブフォントで完璧なZipを手に入れます！

これがお役に立てば幸いです。

— プリシ・ステファン
ソース

css-transitions中のフォントのぎざぎざを修正するのに素晴らしい仕事をしました（完全に削除されたわけではありませんが）。私はTTFAutohintオプションでFontSquirrelジェネレータを使用しました

— Andrey

Fontieを使用して、Windowsのオートヒントを有効にして、WOFF、WOFF2、EOT、SVGファイルを再生成しました。

— ドミニク

4

... bodyタグとコンテンツおよびタイプフェイスのこれらは、一般的に見栄えがよくなります...

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;

}

— user3634787
ソース

2

申し訳ありませんが「ラインシュライベン」とは何ですか？私たちのほとんどはドイツ語を話さないので、投稿全体を英語で作成するといいでしょう。

— rayryeng

3

ああ、私はグーグルで翻訳したことをお詫び申し上げます。スリップしたので、どういうわけか間違った単語です:)

— user3634787

3

テキストの色が暗い場合、SafariとChromeでは、テキストストロークのcssプロパティを使用した方が良い結果が得られます。

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

— クリステル
ソース

問題は、FirefoxとOperaについてです。したがって、この回答は質問とは関係ありません

— vsync

-4

追加

font-weight: normal;

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

— アーロンVIII
ソース

7

font-weight（当然のことながら）フォントの平滑化ではなく、フォントの太さに影響します。@ font-face宣言に追加すると、リンクされたフォントファイルが通常の太さのフォントファイルでない場合に混乱が生じます。

— Mike Meyer

@MikeMeyer実は私はアーロンのコメントに同意します。font-weightを追加する：「軽い」フォントであるフォントインクルードに通常を追加すると混乱が生じるように見えますが、初心者の開発者を混乱させるだけです。私の経験では、通常のデフォルトを指定することは実際には良い習慣です。この場合の標準とは、含まれているフォントと使用されている文字の「標準」を指し、フォントフェース自体に関する情報を指定することを意図していません。多くの場合、（特に大規模なプラットフォームでは）フォントスタイルの周りに見られる、あまりにも典型的な悪いアーキテクチャーに起因するバグの可能性を減らします。

— dudewad 2014

実際、フォントフェース自体の名前は、デフォルトでフォントの太さを示す必要があります...！

— dudewad 2014

@dudewadそれはあなたが同意するのは素晴らしいことです、そしてええ、それはまともな（かなり簡潔な言葉ですが）についてのまともな「プロヒント」ですfont-weight。ことは、OPは質問していなかったということです— font-weight彼はアンチエイリアスについて質問していました。これはまったく別の質問に対する正解です。

— Mike Meyer

@MikeMeyerあなたは完全に正しいです。私は時々少し夢中になります。;）

— dudewad 2014