firefox @ font-face失敗與fontawesome

我在運行的OSS應用程序上使用FontAwesome字體，我似乎無法通過Firefox的字體清理工具。firefox @ font-face失敗與fontawesome

這些文件都是服務於相同的域，路徑是正確的，並且我使用的FontAwesome的官方CSS來自Firefox，通過他們的網站和本地文檔提供服務。

所以我必須錯過簡單的東西。

[11:39:02.945] downloadable font: invalid version tag (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css 
[11:39:02.945] downloadable font: rejected by sanitizer (font-family: "FontAwesome" style:normal weight:normal stretch:normal src index:0) 
source: http://127.0.0.1:6543/static/font/fontawesome-webfont.eot @ http://127.0.0.1:6543/static/css/responsive.css

是Firefox的錯誤的例子，當我嘗試通過開發來糾正。我試圖做完整的根路徑/靜態/字體和相對於CSS ../font/，它總是失敗，這些錯誤對我來說。

一切適用於Chrome等。它似乎只是Firefox討厭我。我已經通過其他答案進行了搜索，並且我已經得到了整個系列的字體。

https://github.com/mitechie/Bookie/tree/develop/bookie/static/font

感謝您的任何提示。

來源

2012-06-17 Rick

A）你確定你的服務器的MIME類型設置爲eot/woff/ttf/svg嗎？ B）它看起來像是在遇到與EOT有關的問題。這可以通過Firefox不支持EOT的事實來解釋;它使用WOFF和TTF。 C）您是否嘗試過使用Firebug或Firefox的本地開發人員工具進行調試？ D）你可以發佈你的（相關的）CSS和HTML嗎？

來源

2012-06-18 14:37:41

謝謝，這是一個兩部分問題。第二部分是第一部分。來自fontawesome.scss的示例css在各種字體格式的路徑周圍使用單引號。當我在他們身上運行我的scss構建器時，它剝離了它們。他們需要加雙引號。由於沒有引號，FF未能解析src：位。由於它失敗了，它只有src：..eot這意味着IE瀏覽器，它不能在FF中工作。將引號更改爲雙引號使所有內容都令人愉快。 – Rick

真棒！好，Rick。 –

實際上，在Firefox中，Content-Type標頭被忽略。 https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face#Notes – Martin

謝謝，這是一個兩部分問題。

第二部分第一部分。來自fontawesome.scss的示例css在各種字體格式的路徑周圍使用單引號。當我將scss構建器（pyscss）運行在它們上面時，它剝離了它們。他們需要加雙引號。

由於沒有引號，FF未能解析src：url（...）位。由於它失敗了，它只有src：..eot這意味着IE瀏覽器，它不能在FF中工作。

將引號更改爲雙引號使所有內容都令人愉快。

所以這是我的錯，使用pyscss和它的解析器，最終打破了Firefox的語法。

謝謝Matt幫助我仔細觀察。

來源

2012-06-18 18:07:47 Rick

我有同樣的錯誤，但引號不是問題。我的解決方案是從http://www.fontsquirrel.com/tools/webfont-generator中的TTF文件重新轉換字體，然後重新上傳它們。然後錯誤消失了。 – Justin

對我來說，這是足以使.eot/ .woff/.SVG/的.ttf文件在同一個* .war文件和其他靜態內容（CSS，PNG等）放置。看起來像FF和IE發現從其他服務器下載字體文件危險。

來源

2012-09-06 14:09:21 Majek

我在我的一個客戶網站上遇到了同樣的問題。

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format('embedded-opentype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format('woff'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format('truetype'), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format('svg'); 
}

上面的工作在Firefox中。下面的那個不起作用。

@font-face { 
font-family: 'SourceSansProBlack'; 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot'); 
    src: url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/eot') format(embedded-opentype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/woff') format(woff), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/ttf') format(truetype), 
     url('http://everythingfonts.com/font/face/HwlUPF6WEeKcF1DlSVDSjg/svg') format(svg); 
}

原來的格式說明符需要引用格式（'svg'）。由網站提供的一些CSS樣式表不會引用格式說明符。我用單引號和雙引號對路徑進行了實驗，但沒有任何區別。所以我可以說這是沒有引號格式說明符而不是雙/單引號路徑的問題。

來源

2014-11-24 01:45:27 dors

我知道這是遲來了，但最好的選擇是使用CDN的font-awesome。如果你這樣做，你幾乎不會遇到這種錯誤。

如果從外部文件中引用的字體，行註釋掉：

@font-face { 
 
    font-family: FontAwesome; 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot"); 
 
    src: url("../vendors/font-awesome/fonts/fontawesome-webfont.eot") format("embedded-opentype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff2") format("woff2"), url("../vendors/font-awesome/fonts/fontawesome-webfont.woff") format("woff"), url("../vendors/font-awesome/fonts/fontawesome-webfont.ttf") format("truetype"), url("../vendors/font-awesome/fonts/fontawesome-webfont.svg#fontawesomeregular") format("svg"); 
 
    font-weight: 400; 
 
    font-style: normal 
 
}

，並使用從CDN鏈接的頭部，而不是

<head> 
 
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
 
    
 
</head

你會很開心。

來源

2017-10-21 04:49:35 user3774167

firefox @ font-face失敗與fontawesome

回答

相關問題