2

そのため、私は WeLoveIconFonts API 呼び出しを使用して、ホストされている Entypo アイコン フォントのバージョンを @import していますが、最近ダウンタイムが発生しており、ファイルを自分でホストできればより快適だと思います。

このCSSから呼び出されるファイルをダウンロードしました

@import url(http://weloveiconfonts.com/api/?family=entypo);

CSSファイルとして保存し、独自のサーバーに再アップロードしました

新しい @import URL は現在

@import url('http://myserver.com/entypo.css');

このファイル内には、個々のフォント ファイルへの呼び出しがあります (URL は下に表示されています)。

@charset 'UTF-8';
@font-face {
font-family: 'entypo';
font-style: 'normal';
font-weight: 'normal';
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
}

これもダウンロードしてサーバーに再アップロードし、それに応じてパスを修正しました。

src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');

になる

src: url('http://myserver.com/fonts/entypo/entypo.eot');

すべてのフォントと新しいスタイルシートを含むすべてが NET タブ (ステータスは「200 OK」) 内から正常に読み込まれているようですが、必要な項目にフォントが設定されていないようです。 Web サイトのデフォルト フォント (Proxima Nova) と、小さな文字を含むボックスを表示します。firebugをチェックインすると

font-family: 'entypo';

がグレー表示され、代わりにプロキシマが表示されます。

私がどこで間違っているのか誰にも分かりますか？私の疑いでは、元の @import ファイルは CSS として呼び出されることを意図したものではありませんが、ダウンロードするファイルの内容は CSS ルールです。

どんな助けでも大歓迎です。

4

2 に答える 2

0

これが Firefox でのみ発生している場合は、「Allowed Origin」ヘッダーが正しく設定されておらず、Firefox がブロックしています: Access-Control-Allow-Origin.

http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/

MIME タイプが正しく設定されていない可能性もあります。

http://somethinginteractive.com/blog/2012/06/04/proper-mime-types-for-embedded-font-face-fonts/

于 2014-04-02T08:41:05.710 に答える
0

Entypo を自己ホストする場合は、ホスティング サービスから個別にファイルを抽出するよりも、http://www.entypo.com/から必要なファイルをダウンロードした方が良い結果が得られるでしょう。

フォントの独自の Web サイトにあるダウンロード パッケージは、必要なファイルを提供し、CSS はフォントをローカルでホストするように既に設定されています。

于 2014-01-04T20:12:41.143 に答える