2011-12-17 5 views
1

私は実際に@ font-face CSSとHTMLのレンダリングにいくつか問題があります。面白いのは、フォントが読み込まれているように見えますが、ページ上でぼやけて見えるだけで、Safariでは他のブラウザと比較して色がはるかに暗いことです。私は物事がどのようになっているのか本当に失望しています!@ font-face CSSの問題

私が実装した方法は、CSS TricksのWebサイト(http://css-tricks.com/snippets/css/using-font-face/)から入手したものです。これは素晴らしいリソースです。まだ正しく動作していないし、他のどのブラウザでも他のWebサイトを表示することはできません。

私はWindows 7でCleartypeフォントをチェックしています。私はフォントがレンダリングされているので私のヘッダーCSSが良いと仮定しているので、それは構文の問題か何かが簡単だと思っています。おそらく、私はHTML 5を使用しているのでしょうか?ここにコードを掲示http://www.richmindonline.com/sampleconversion2.html

私が持っていたちゃったごめんなさい:

は、ここに私のTESTDOMAINのページです。 CSSファイルはなく、スタイルは内部とインラインです。

+0

問題は、フォントが '1px'よりも薄く、サブピクセルサイズでレンダリングされていることです。フォントをスケールアップするか、太いものを選択してください。 Google Webフォント(無料でCSSコードを含む)をお勧めします:http://www.google.com/webfonts – Blender

+0

こんにちは、Blender、フォントをどのように拡大しますか? CSSやインラインスタイルでピクセルサイズを変更するだけの意味ですか?可能であればクライアントは正確に同じフォントを使用したいと考えています –

+0

うーん、私はGoogleのフォントに幸運をもたらしました。フォントサイズを大きくするだけです。 – Blender

答えて

1

あなたが使用するフォントは薄すぎます。また、ブラウザによってHTMLのレンダリング方法も異なります。古いコンピュータの中には、アンチエイリアス処理をしないものもあります。ちなみに、そのリンクのテキストにはアンチエイリアスが有効になっておらず、実際に私はそれを読んで変な気分にさせました。 @font-faceを使用する際に留意すべき

もの:

  1. 異なるフォントの多くは素敵に見えるかもしれませんが、フォントが同様にレンダリングする必要があるため、ページのダウンロードに時間がかかります。
  2. 古いブラウザでは、@font-face(特にIEには注意してください)をサポートしません。
  3. フォントフェイスが失敗した場合に使用するフォントとサイズを考慮した植字をデザインします。

私はいつも標準フォントから選択しています。彼らはあまりにも悪くありません。