icoMoon字體無法在Firefox上顯示

在Firefox上使用圖標替換字體的跨瀏覽器沒有出現問題，目前只顯示內容文本而不顯示icomoon文本替換。源代碼顯示從代碼Sass + Magento + .htaccess，任何想法或幫助將不勝感激。icoMoon字體無法在Firefox上顯示

網站： 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"; 
}

來源

2012-12-02 user1869833

我是有icomoon和Firefox爲w問題埃爾。你有沒有試過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'); 
}

來源

2013-03-22 00:43:37 meaganoff

+1我發現他們非常相似，並嘗試解決方案几乎無望，但它的工作！ – diosney

嘗試添加到您的.htaccess文件。它應該解決您的問題。它修復了我的。

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

來源

2013-08-29 09:02:05 webkub

從子域調用我的頁面時，發生icomoon問題。這解決了我的問題。謝謝。 – MrUpsidown

這也解決了我在調用來自不同域的圖標字體文件時的問題。它可能與Firefox的跨域請求阻止實現有關。 –

我有同樣的問題（用Wordpress安裝），icomoon圖標沒有在Firefox中顯示。 Chrome，Safari，IE工作正常。

網站啓動並運行後，客戶端要求我將www包含到url中，而不僅僅是http：//。所以我改變了博客地址，但不是WordPress的地址（在Wordpress儀表板）。突然間，所有的Icomoon圖標都消失了。將www添加到Wordpress地址後，圖標又回來了。

來源

2013-12-06 10:30:55 Ralf

有兩件事你可以嘗試。我用這兩個，它爲我工作。使用您的CSS文件中的完整鏈接引用icomoon。您的.htaccess可能會重寫URL。其次，在.htaccess文件中添加以下內容，如webkub指出的那樣。

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

來源

2014-07-29 08:35:56

如果您正在運行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>

來源

2014-12-03 15:48:02 Steve

icoMoon字體無法在Firefox上顯示

回答

相關問題