2

PhotoshopでWebサイトをデザインし、その結果に満足したので、コーディングを開始しました。ただし、フォントのレンダリングに問題があります。Photoshopと比較して、ブラウザではフォントがひどく見えます。ただし、フォントは最初からOperaでスムーズにレンダリングされます。

いくつか検索した後、ChromeとSafariでもスムーズにレンダリングできるようになりました。CSSの@font-face内の一番上に「svg」を移動して修正しました。

ただし、FirefoxとInternetExplorerでまだ問題が発生しています。私が信じている両方の最新バージョン。

画像（オリジナル）： ここに画像の説明を入力してください 青色のテキストが問題です。

そして@font-faceコード：

@font-face {
    font-family: 'MuseoSlab500Regular';
    src: url('../fonts/Museo_Slab_500-webfont.eot');
    src: url('../fonts/Museo_Slab_500-webfont.svg#MuseoSlab500Regular') format('svg'),
         url('../fonts/Museo_Slab_500-webfont.woff') format('woff'),
         url('../fonts/Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Museo_Slab_500-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

私がこれまでに見つけて試した唯一の解決策は、@font-faceの行を再配置することです。私が言ったように、これは一部のブラウザの問題を解決しましたが、FirefoxとInternetExplorerは解決しませんでした。

4

2 に答える 2

1

ブラウザ間でテキストが少し異なってレンダリングされても問題ないと思います。異なるOSでは、さらに異なるレンダリングを受け取ります（OS XまたはUbuntuを確認してみてください）。そして、それも大丈夫です。Photoshopはここでは悪いリファレンスです。ブラウザは最終的な外観を提供し、ブラウザはユーザーにWebサイトを表示します。

代わりに、IE8では機能しないため構文を修正する必要があると思います。EOTフォントでプロパティを宣言しsrcています—これは機能しますが、IE6以降でのみ機能します。次に、それを再宣言します。複数のフォーマットを含めているため、IEはロードに失敗し、デフォルトのフォントにバックアップします。

あなたが興味を持っているかもしれない追加の読書：

于 2012-09-30T16:45:08.330 に答える
0

レンダリングが異なる理由はいくつかあり、ほとんどの場合、それらについて多くを行うことはできません。フォントフォーマットを試してみると、テーマにバリエーションが追加されるだけです。システムが異なれば、フォントのレンダリングも異なります。

Firefoxがカーニングを適用しているようです（たとえば、「ä」は他のブラウザよりも前の「V」に近いです）。ただし、少なくともfonts.comから入手できるMuseoフォントには、カーンペアがありません。しかし、フォントをどこから入手したかを指定していません-

于 2012-09-30T17:06:55.560 に答える