0

私はアイコンフォントを使おうとしていますが、これまでのところ、Firefox以外のすべてのブラウザでうまく機能しますが、理由はわかりません。アイコンの代わりに、data-icon属性にある値を表示するだけです。Firefoxで機能しない理由を誰かが説明できますか（最新） ）？

@font-face {
  font-family: 'icon-font';
  src: url('//bit.ly/ZxomPz') format('woff'),
       url('//bit.ly/WPGMJF') format('truetype'),
       url('//bit.ly/16eqBwn') format('eot'),
       url('//bit.ly/16eqLDZ') format('svg');
}

[data-icon]::before {
font-family: 'icon-font';
font-weight: 400 !important;
content: attr(data-icon);
text-transform: none;
margin-right: 3px;
position: relative;
top: 8px;
right: 5px;
font-size: 31px;
line-height: 0;
}



<span data-icon="1" aria-hidden="true"></span>
4

2 に答える 2

1

これが@font-face宣言が推奨しているものです。たぶん、あなたはこの例であなたのものを書き直してみることができます。

@font-face {
    font-family: 'Lobster13Regular';
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot');
    src: url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.woff') format('woff'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.ttf') format('truetype'),
    url('/skins/default/media/fonts/lobster/Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
}

また、サーバーが正しい「Mime-type」（ttf | otf | eot | woff）を配信し、外部リソースへのアクセスを許可するようにします（Access-Control-Allow-Origin "*"）

于 2013-03-08T19:13:03.863 に答える
0

私はパーティーに遅れていることを知っていますが、これが私のために働いた解決策であり、私はそれを答えに見ていません（@Milkywayパターンによる短い言及を除いて）。

.htaccess次の情報を使用してファイルを作成し、フォントが配置されているのと同じフォルダーに保存します。

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

詳細はこちら：

于 2014-05-12T20:11:19.717 に答える