1

チャレンジ：

すべての主要なブラウザー、デバイス、およびオペレーティング システムで適切にレンダリングされる動的な Web フォントを提供します。

物語：

そのため、過去にcufonまたはsifrを使用していましたが、@font-faceを支持して両方を放棄しました。本番環境で @font-face をしばらく使用した後、恐ろしい発見をしました。Windows XP では、ブラウザーに関係なく、多くの (ほとんどの?) フォントががらくたのように見えます。google chrome でさえ、XP はフォントを容認できないほどぎざぎざで醜くレンダリングします。

なぜこれが起こっているのかはわかっています。古いスタックオーバーフローに関する多くの優れた投稿を読んだ後、問題はフォントヒンティングの問題ではなく、XP の clear-type がデフォルトでオフに設定されている問題であることがわかりました。そのため、アプリケーションに関係なく、XP ではデフォルトですべてのフォントがギザギザになっています。

それで... @font-face がどこでもうまく機能するが、clear-type をオフにした XP で、まだ cufon よりも優れている場合、私たちは何をすべきでしょうか?

可能な解決策：

  • デフォルトは @font-face、Windows XP ではユーザー エージェント スニッフィング付きの Cufon。（現在使用していますが、あまり好きではありません）
  • @font-face だけでクリアタイプを強制する未知の方法
  • キュフォン一人で:(
  • すべて一緒に別のパラダイム

失敗した解決策:

  • Adobe Typekit (滑らかな見本 jpeg を表示しているにもかかわらず、XP の Web サイトではギザギザ!)
  • Google Webfonts (XP と同じ問題)
  • @font-face 単独 (XP と同じ問題)

Cufon はこれまでのところどこでも機能しますが、何かをアニメーション化している場合や、事後にテキストを更新したい場合は、追加の課題が発生します。

ブラウザや OS を問わず完全に機能するソリューションはありますか? これを処理する最善の方法は何ですか?

4

3 に答える 3

4

見栄えの悪いWebフォントにはいくつかのヒントが欠けていると確信しています（編集：いいえ、フォントをWindowsで見栄えよくするためにヒントはまだ必要ですが、ここでの本当の問題はXPで無効になっているClearTypeでした。しかし、とにかくこの答えには解決策があります）。

他のオペレーティング システムのフォント レンダラーとは異なり、Windows エンジンは、フォントに付属するヒント情報に依存しています。ヒンティングが欠けている、悪い、または壊れている場合、フォントは醜く見えます - それは簡単です。幸いなことに、自動生成されたヒントをttfautohintを使用して ttf-font に追加する方法があります。ヒントを追加した後、拡張 TTF から必要なさまざまな Web フォント形式 (eof、woff など) を生成できます。さらに、font-smoothing が無効になっている場合は SVG フォントを使用するようにしてください。SVG フォントは常にアンチエイリアシングでレンダリングされるためです。

Pixels|Bytes で Web フォントを作成する方法に関する記事を書きました。この記事では、フォントにヒンティングを追加する方法と、Font Smoothie スクリプトを使用して必要に応じて SVG フォントを有効にする方法について説明しています。お役に立てれば ：）

PS: 自分のブログへのリンクがここで歓迎されないことは承知していますが、私の投稿は問題に対する適切な解決策を説明していると思うので、とにかく投稿しました。リンクを削除してほしい場合は、コメントを残してください。削除します。

于 2013-02-19T09:50:32.917 に答える
2

http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/

これは私がこれまでに見つけた作品です。このソリューションはギザギザのフォントを検出するので、次のようなことができます:@font-face標準として、Cufon をフォールバックとして。

于 2012-05-28T18:55:22.623 に答える