0

サイトを確認してください：

http://tinyurl.com/caljnqb

私はfont-faceを使用しています：

@font-face {
    font-family: 'SegoeUI';
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeui.eot?') format('eot'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeui.woff') format('woff'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeui.ttf')  format('truetype'),
         url('{site_url}themes/site_themes/agile_records/fonts/segoeui.svg#SegoeUI2') format('svg');
    font-style: normal;
    font-weight: normal;
    }
@font-face {
    font-family: 'SegoeUIBold';
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.eot?') format('eot'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.woff') format('woff'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.ttf')  format('truetype'),
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuib.svg#SegoeUI3') format('svg');
    font-style: normal;
    font-weight: bold;
    }
@font-face {
    font-family: 'SegoeUIItalic';
    src: url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.eot?') format('eot'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.woff') format('woff'), 
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.ttf')  format('truetype'),
         url('{site_url}themes/site_themes/agile_records/fonts/segoeuii.svg#SegoeUI4') format('svg');
    font-style: italic;
    font-weight: normal;
    }

また、Firefox、Chrome、Operaブラウザでの出力に問題があります。IEではすべて問題ないように見えます。フォントがシャープに見えます。なぜそれが起こるのですか？多分私は何か間違ったことをしているのですか？

4

2 に答える 2

3

ブラウザが異なれば、フォントのレンダリングも異なります。

私が過去に使用した解決策は、どのブラウザがページをレンダリングしているかに基づいて、フォントがフォント面に提供される順序を再配置することです。通常、私の問題は以前のバージョンのIEにあるため、ttfファイルの前に.woffファイルを提供する別のスタイルシートを使用しました。一部のブラウザは特定のフォントタイプのファイルしか読み取れませんが、両方を読み取って、機能するファイルを見つけた後は検索を停止できるためです。それらを再配置すると、レンダリングが少し良くなるものを使用できる場合があります。

個別のcssを使用することになった場合は、$ _ SERVER配列のhttp_user_agentプロパティを使用して、ブラウザーに基づいてフォントcssを設定できます。

googles Droidフォントは、ブラウザによっては面白くレンダリングされるフォントであるため、他のアプローチを見つけるのに役立つ可能性のある調査を行っています。

于 2012-04-10T19:53:58.027 に答える
0

各フォーマットを正しく注文するには、いくつかのコツがあるようです。

たとえば、

これは、最初にsvgを提供するように変更されたFontspringの防弾構文です。

@font-face {
font-family: ‘MyWebFont’;
src: url(‘webfont.eot’);
src: url(‘webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘webfont.svg#svgFontName’) format(‘svg’),
    url(‘webfont.woff’) format(‘woff’),
    url(‘webfont.ttf’)  format(‘truetype’);
}

http://www.fontspring.com/blog/smoother-web-font-rendering-chromeから

http://www.w3.org/TR/WOFF/#appendix-bの時点で、WOFFフォントに適切なmimeタイプを使用することもできます。

application/font-woff

ブラウザによる適切な処理を確実にするため

于 2012-12-12T11:34:38.307 に答える