1

これを行うことで、CSS にフォントをロードしています。

@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrow.ttf);
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBold.ttf);
    font-weight:bold;
    font-style:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowItalic.ttf);
    font-style:italic;
    font-weight:normal;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBoldItalic.ttf);
    font-weight:bold;
    font-style:italic;
}

通常のスタイルは、すべてのブラウザーで機能します。

太字と斜体のスタイルは、IE9 でのみ正しく機能しますが、Chrome と FireFox では機能しません。私は何か間違ったことをしていますか？

4

4 に答える 4

1

Firefox の Web コンソールを見ると、(特に) 次の CSS エラーが表示されます。

背景:#fff、estilos.css:32

ダウンロード可能なフォント: テーブル 'cmap': テーブルの解析に失敗しました (font-family: "arialNarrow" style:normal weight:bold stretch:normal src index:0) ソース: http://www.meengoo.com/test/fonts/ ArialNarrowBold.ttf estilos.css

ダウンロード可能なフォント: サニタイザーによって拒否されました (font-family: "arialNarrow" style:normal weight:bold stretch:normal src index:0) ソース: http://www.meengoo.com/test/fonts/ArialNarrowBold.ttf estilos.css

cmap エラーは、フォントが破損していることを意味します。http://www.font2web.com/などのサービスを使用して、フォントを修正し、適切な形式に変換することをお勧めします。また、正しい太字と斜体の規則を与えるために微調整できる CSS も作成します。

@font-face ルールを定義するときに font-family に一意の名前は必要ないことは正しいです (実際、フォント バリアントを定義するときはそうすべきではありません)。私が見ることができる唯一の問題は、余分なフォントの太さとフォントスタイルのルールがあることです.

これを試して：

@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrow.ttf);
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBold.ttf);
    font-weight:bold;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowItalic.ttf);
    font-style:italic;
}
@font-face{
    font-family: arialNarrow;
    src: url(../fonts/ArialNarrowBoldItalic.ttf);
    font-weight:bold;
    font-style:italic;
}

順序が重要であることに注意してください。ボールド/イタリック スタイルは最後に来る必要があります。疑う人はhttp://www.metaltoad.com/blog/how-use-font-face-avoid-faux-italic-and-bold-browser-stylesを参照して、なぜこのようにすべきかを確認してください。

于 2013-10-28T20:58:41.237 に答える
1

以下を .htaccess に追加すると、少なくとも最新の FF バージョンでは問題なく動作します。

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

スタック オーバーフローに関する完全な議論については、ここを参照してください: CSS @font-face not working with Firefox, but working with Chrome and IE

于 2013-10-31T12:51:52.743 に答える