4

私はこれがよくある問題であることを知っています。私は見つけることができるほとんどすべての解決策を試しました。

問題

クライアントに 4 つのフォント フェイスを実装しようとしています。現在のファイルは font-squirrel で生成されています。ただし、フォントは IE 7/8 ではまったく機能せず、IE9 では部分的に機能します。

フォント自体のクロスブラウザー レンダリングはここでは問題ではありません。表示させたいだけです。

私たちが試したこと

私たちは (私が働いている会社で) 次の作業に多くの時間を費やしました:
- 複数の構文を見つけました。
- ページがロードされてから数秒後に、JavaScript で CSS を再ロードします (古いプロジェクトで機能しました)。
- すべての構文の問題を確認してください。
- 404 エラーが発生したかどうかを確認します
- 同じ名前を付けますが、フォントの太さが異なります
- ?#iefix と使用される特定の形式を追加しようとしました

スクリーンショット

ここに画像の説明を入力

サンプルコード

ライブで見ることができます: http://dev.phin.fr/fontsie/

構文

@font-face {
            font-family: 'DidotBoldItalic';
            src: url('fonts/DidotHTF-24BoldItalic.eot');
            src: url('fonts/DidotHTF-24BoldItalic.ttf') format('truetype'), url('fonts/DidotHTF-24BoldItalic.svg') format('svg');
            font-weight: normal;
            font-style: normal;
        }

ありがとうございました!

4

2 に答える 2

1

あなたの例からすべてのファイルとコードを自由にダウンロードしました。

CSS 宣言に « local('☺') » 属性がないことに気付きました。次の例の 3 行目を見てください。

@font-face {
    font-family: 'SofiaProBold';
    src: url('Sofia-Pro-Bold.eot');
    src: local('☺'), url('Sofia-Pro-Bold.ttf') format('truetype'), url('Sofia-Pro-Bold.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

http://imageftw.com/uploads/20130116/font-fix.pngで IE8 (PC) の結果を確認できます。

この小さなトリックは、Sofia フォントの問題を解決しますが、残念ながら、Didot フォントでは機能しません。フォントが元々 Web フォントではないか、著作権があり、fontsquirrel が変換に失敗していると推測できます。

以下はあくまでも私見です。

フォントを扱うときは、すべての @font-face 宣言を、すべてのフォント ファイルを含む同じディレクトリ内の CSS ファイルに配置し、その CSS ファイルを<head>ドキュメントの にリンクするようにしてください。

例:

/fonts/myfont/myfont.css « add to the document's <head>
/fonts/myfont/myfont.woff
/fonts/myfont/myfont.eot
/fonts/myfont/myfont.ttf
/fonts/myfont/myfont.svg

これにより、適用された @font-face を見つけやすくなるだけでなく、url('myfont/font.ttf')属性内での相対/絶対パスの使用も回避されます。

于 2013-01-16T20:13:32.777 に答える
0

ここにアクセスしてください: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

IE 6、7、および 8 は機能しません。各ブラウザーのフォントのレンダリング間の不一致は、一般的に知られている問題です。あなたのスクリーンショットに基づいて、最新のブラウザも同様にうまく機能しているように見えます。すべての Webkit ベースのブラウザー (safari、chrome、opera) は、Firefox または 9 を個別にレンダリングするよりも、レンダリングが互いに近くなるはずです。

于 2013-01-16T19:15:39.663 に答える