Font Awesome Icons在某些瀏覽器中不起作用

Question

我正在使用Bootstrap + Font Awesome，大多數桌面和移動瀏覽器都可以，但Font awesome圖標不適用於Opera Mobile，Opera Mini和某些版本的Android瀏覽器等瀏覽器。 僅顯示空白矩形。

有誰知道這個問題？ 而且，有解決方案嗎？

謝謝

[編輯2013-03-06！重要]我找不到任何明顯的問題，所以我嘗試了聞所未聞的解決方案。 我試過兩個在線字體轉換工具。 首先，我使用http://www.freefontconverter.com/將原始FontAwesome svg轉換為ttf。 然后我使用http://www.font2web.com/將.ttf轉換為.eot，.woof anf .otf。

結果：opera mobile現在可以正常顯示圖標。 （我不知道是什么變化，但有效）

現在的問題是Blackberry 6 。 我用BB Curve 9300，Modernizr和Google字體測試了@ font-face，一切都還可以。 但FontAwesome仍然不起作用......

---

[編輯2013-03-01] Opera mobile 10+支持@ font-face，因此問題可能是另一個問題。 我嘗試使用@ font-face的另一種服務器字體並且工作正常，但是使用FontAwesome我無法正確顯示圖標。

[編輯2013-03-03]問題不只是我的網站，字體真棒網站的例子和測試不起作用...

[編輯2013-03-4]我試圖使用Modernizr“font-face”功能檢測進行后備，但Opera Mobile和BlackBerry 6返回true，因為它們支持該功能。 如何檢測FontAwesome字體是否已加載？

Answer 1

我會調查幾個不同的問題，希望能幫到你解決它。

如果你提到什么字體工作，我們可能會幫助更好。 我會比較你說的字體與FontAwesome，看看有什么不同。 我敢打賭，字形被映射到一個不同的unicode區域，也許瀏覽器不會從那里讀取？

您可以使用Font Forge之類的工具來檢查與其他字體的差異。 我注意到當嘗試從Font Forge重新生成FontAwesome字體時，我得到了em間距的驗證錯誤，並且字形有錯誤（自相交，方向錯誤，極值處缺少點）。 我以前在圖標字體中看過這個並且從未出現過問題，但我之前沒有在Opera上測試過。 如果你比較嘗試生成一個有效的字體，你可能可以縮小問題范圍。

其他東西我敢肯定你已經覆蓋但是仔細檢查：

我在這里讀到安裝了本地版本的字體可能會與字體嵌入沖突。 https://github.com/FortAwesome/Font-Awesome/issues/247

如果您使用icon-font然后將自己的字形添加到其中，則使用類似font squirrel的內容生成所有Web安全格式，確保您告訴生成器添加您創建的字形的unicode范圍。 一旦我忘記這樣做，應用程序只添加了az范圍內的字形。 一種簡單的檢查方法是查看demo html頁面中的gyphs選項卡，並確保包含所有圖標。

你正在使用正確的CSS3 font-face規則並嵌入eot，ttf，woff和svg，你已經等了一會兒。 我注意到在一些舊的iphone上，字體需要永遠顯示。

使用像modernizr font-face特征檢測這樣的工具可能會使瀏覽器之間的某些支持變得更加容易。

我很想知道問題是什么。

Answer 2

Opera Mini不支持font-face，因為官方網站http://www.opera.com/docs/specs/productspecs/中提到了它

我能想到的一個“臟”小技巧，就是將你的字體轉換為SVG，並在你的CSS中使用它， 因為它是部分支持的 （因為它也寫在他們的網站上）。

就像是

.icon{

 background-image: url(icon.svg);
 -o-background-size: 100% 100%;
 -webkit-background-size: 100% 100%;
}

另請查看http://www.w3.org/TR/SVGTiny12/fonts.html上方的鏈接

UPDATE

Opera mini不支持IOS 6.1中的FontAwesome

其他字體 - 例子都不起作用（ http://codepen.io/bennettfeely/full/ErFGv ）

但是使用SVG似乎是一個很好的解決方案，概念證明原始來源： http ： //dbushell.com/demos/css-sprites/上面的演示的更多信息： http ： //coding.smashingmagazine.com/2012/01/ 16 /分辨率的獨立性與- SVG /

Answer 3

OPERA MOBILE的解決方案（無Opera Mini）

我試過兩個在線字體轉換工具。 首先，我使用http://www.freefontconverter.com/將原始FontAwesome svg轉換為ttf。 然后我使用http://www.font2web.com/將.ttf轉換為.eot，.woof anf .otf。

最后，我替換了原始文件，現在Opera移動設備正確顯示圖標。

Answer 4

為此我知道Opera Mini中有@ font-face支持，Andoroid中只有部分@ font-face支持從2.2到3.0（早期的Android版本根本沒有@ font-face支持）。 請參閱： http ： //caniuse.com/fontface

我所知道的部分支持意味着它們不支持受DRM保護的字體，而某些語法如“笑臉”語法對它們不起作用。

因此，如果您想在Opera Mini和Android 2.1上顯示圖標，則需要回退圖像圖標。 如果你有Android 2.2-3.0的問題，你可以通過改變語法來修復它。

Answer 5

FortAwesome報告了這樣的錯誤：

1. https://github.com/FortAwesome/Font-Awesome/issues/246
2. https://github.com/FortAwesome/Font-Awesome/issues/791

他們還沒有被修復，他們聯系了Opera dev關系，以找出造成這種情況的原因。 除了等待它們修復它之外，你沒有太多選擇。 跟蹤錯誤以了解更多信息。

Answer 6

1. 轉到http://icomoon.io/app/

2. 按鈕圖標庫

3. 添加庫Font Awesome

4. 選擇您想要的圖標

5. 按鈕字體（導出圖標到css字體真棒）

6. 用新的字體替換字體真棒（ttf，svg。etc ...）

CSS

 @font-face{
font-family:"FontAwesome";
src:url('../fonts/awesome/fontawesome.eot');
src:url('../fonts/awesome/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/awesome/fontawesome.woff') format('woff'),    url('../fonts/awesome/fontawesome.ttf') format('truetype'),
        url('../fonts/awesome/fontawesome.svg#fontawesomeregular') format('svg');
font-weight:normal;font-style:normal;}.flag:before,.mobile:before{font-family:"FontAwesome";font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: 1;-webkit-font-smoothing: antialiased;display: inline-block; text-decoration: inherit;}.flag:before{content:"\f024";}.mobile:before{content:"\f10b";}

我試試這個然后Awesome Fonts在Opera Mobile中運行:)

Answer 7

也許這與charset有關？ 您是否在文檔和樣式表中聲明了UTF-8？

<meta charset="UTF-8">

要么

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

並在樣式表中（注意，必須是第一行，第一列）：

@charset "utf-8";

Answer 8

作為參考，我有這個問題，問題是域。 有些瀏覽器，Firefox特別拒絕從其他域加載字體（稱為相同域策略）。 標題

Access-Control-Allow-Origin "*"

例如，在nginx中，這個配置如下：

location ~* \.(eot|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

必須設置，並且還要記住字體的內容類型必須是

application/x-font-ttf                ttf;
font/opentype                         otf;
application/vnd.ms-fontobject         eot;
font/x-woff                           woff;

錯誤的內容類型可能導致字體無法加載，因此您將丟失圖標。 很高興有這個信息作為參考:)

Answer 9

我也遇到了在Blackberry中顯示SVG字體的問題。 問題是svg的名稱（在文檔中），字體系列的名稱必須相同。 我在這里找到了這個答案，在最后一個答案的評論中：

@fontface on blackberry os 7

Answer 10

使用icomoon app http://icomoon.io/app/將svg字體更改為web字體並替換Font Awesome的舊字體。 它適用於Opera mobile