FirefoxでicoMoonフォントが表示されない

Question

Firefoxのアイコン置換フォントでクロスブラウザに問題はありませんでしたが、現在はコンテンツテキストのみが表示されますが、icomoonのテキスト置換は表示されません。ソースコードは、Sass + Magento + .htaccessというコードで表示されます。アイデアや助けをいただければ幸いです。

ウェブサイト： http://www.phoebessecret.co.nz

は.htaccessの書き換えを行っていた：

AddType image/svg+xml svg svgz 
AddEncoding gzip svgz 
AddType application/vnd.ms-fontobject eot 
AddType font/truetype ttf 
AddType font/opentype otf 
AddType application/x-font-woff woff 

<FilesMatch ".(ttf|otf|eot|woff)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
Header set Access-Control-Allow-Origin "http://www.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://skin.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://js.phoebessecret.co.nz" 
Header set Access-Control-Allow-Origin "http://media.phoebessecret.co.nz" 
</IfModule> 
</FilesMatch> 

CSS：

@font-face { 
font-family: 'topshops'; 
src:url('../fonts/topshops.eot'); 
src:url('../fonts/topshops.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/topshops.svg#topshops') format('svg'), 
    url('../fonts/topshops.woff') format('woff'), 
    url('../fonts/topshops.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal;} 

.icon-fonts { 
    font-family: 'topshops'; 
    font-style: normal; 
    speak: none; 
    -webkit-font-smoothing: antialiased; 
    font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
    font-weight: 400; 
} 

.iconsearch { 
    content: "\61"; 
} 

Answer 1

を私はワットとしてicomoonとFirefoxの問題を抱えていましたell。 Paul Irish's 'bulletproof' @font-face syntaxを試しましたか？それはicomoonが出力するものと少し違って、私はそれでより良い運があった - それ以来、FF問題はない。

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); 
} 

Answer 2

これを.htaccessファイルに追加してください。 問題を修正する必要があります。それは鉱山を固定した。

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

Answer 3

私はWordpressインストールで同じ問題が発生しましたが、Firefoxではicomoonアイコンが表示されませんでした。 Chrome、Safari、IEは正常に動作しました。

サイトが起動して実行された後、クライアントはhttp：//ではなくurlにwwwを含めるように求めました。だから、私はブログのアドレスを変更しましたが、Wordpressのアドレスは変更しませんでした（Wordpress Dashboardで）。突然、Icomoonアイコンがすべて消えました。 Wordpressのアドレスにwwwを追加した後、アイコンが戻ってきました。

Answer 4

2つのことを試してみることができます。私は両方を使用し、それは私のために働いた。 CSSファイルのフルリンクを使用してicomoonを参照してください。 .htaccessがURLを書き換えている可能性があります。次に、webkubが指摘したとおり、.htaccessファイルに次の行を追加します。

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

Answer 5

IISを実行している場合、あなたはあなたのweb.configファイルを変更し、おそらく以下に示すようにhttpProtocolセクションを追加したいと思います：

<?xml version="1.0" encoding="utf-8"?> 
    <configuration> 
    <system.webServer> 
     <httpProtocol> 
     <customHeaders> 
      <add name="Access-Control-Allow-Origin" value="*" /> 
     </customHeaders> 
    </httpProtocol> 
    </system.webServer> 
    </configuration>