1. 首頁
  2. 問答
  3. 字體真棒圖標在某些瀏覽器中不工作

字體真棒圖標在某些瀏覽器中不工作

2013-02-22 85 views
21

我使用的是Bootstrap +字體真棒，並且大多數桌面和移動瀏覽器都可以，但字體真棒圖標不適用於Opera Mobile，Opera Mini和Opera某些版本的Android瀏覽器。 只顯示一個空白的矩形。字體真棒圖標在某些瀏覽器中不工作

有誰知道這個問題？並且，是否有解決方案？

感謝

[編輯2013年3月6日！重要] 我找不到任何明顯的問題，所以我試着用聞所未聞的解決方案。 我嘗試過兩種在線字體轉換工具。 首先，我使用http://www.freefontconverter.com/將原始FontAwesome svg轉換爲ttf。然後我用http://www.font2web.com/將.ttf轉換爲.eot，.woof和.otf。

結果：opera mobile現在正確顯示圖標。（我不知道是什麼變化，但作品）

現在的問題是黑莓6。我使用BB Curve 9300，Modernizr和Google字體測試了@ font-face，一切正常。 但FontAwesome仍然無法正常工作......

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

enter image description here

[編輯2013年3月3日] 問題不只是我的網站，字體真棒網站的例子和測試不工作...

enter image description here

[編輯2013-03-4] 我試圖使用Modernizr「font-face」功能檢測作出回退，但Opera Mobile和BlackBerry 6因爲支持該功能而返回true。 如何檢測FontAwesome字體是否已加載？

來源

2013-02-22 Gonzalo

+0

是否啓用圖像？ – Zaffy 2013-02-28 18:19:01

+0

啓用了其他圖像？是。我放了一個PNG圖標，以顯示它們正在正常工作 – Gonzalo 2013-02-28 18:34:57

+0

您可以發佈您正在用於調用fontawesome的css – Shail 2013-03-01 13:01:00

回答

2

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

從我所知道的部分支持意味着他們不支持受DRM保護的字體，某些語法（如「笑臉」語法不適用於他們。

所以，如果你想在Opera Mini和Android 2.1上顯示圖標，你需要使圖像回退到圖像圖標。如果你有Android 2.2-3.0的問題，你可以修改它的語法。

來源

2013-02-28 18:10:22

+0

Opera mobile 10+支持@ font-face，所以問題可能是另一個。我用@ font-face嘗試了另一種服務器字體，並且可以正常工作，但使用FontAwesome時，我無法正確顯示圖標。 – Gonzalo 2013-02-28 19:14:53

+0

我試圖使用Modernizr「font-face」功能檢測進行回退，但opera和BlackBerry 6都會返回true，因爲它們支持該功能。 **如何檢測FontAwesome字體是否已加載？** – Gonzalo 2013-03-04 20:37:31

+0

問題不在於@ font-face。它支持歌劇移動10+和黑莓6+ 字體真棒字體不使用DRM，並且樣式表不包含「笑臉」語法 謝謝，但在這種情況下，這不是最好的答案。 – Gonzalo 2013-03-07 16:48:05

1

也許這是字符集相關？你是否在文檔和樣式表中聲明瞭UTF-8？

<meta charset="UTF-8">

或

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

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

@charset "utf-8";

來源

2013-02-28 22:13:34 dusthaines

+0

是的，我在文檔和樣式表中聲明瞭Charset UTF8，但這不是問題。 – Gonzalo 2013-02-28 23:47:44

7

我會研究幾個不同的問題，希望能幫助您解決問題。

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

您可以使用Font Forge等工具來檢查與其他字體的差異。我注意到當試圖從Font Forge重新生成FontAwesome字體時，我得到了與em間距的驗證錯誤，並且字形出現了錯誤（自相交，錯誤方向，極值點丟失）。我以前在圖標字體中看到過這個，從來沒有問題，但我還沒有在Opera上測試過。如果您嘗試使用某種可行的方法生成字體，則可以縮小問題的範圍。

其他的東西，我敢肯定，你包括在內，但雙重檢查：

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

如果你把圖標字體，然後添加自己的字形，然後使用像字體松鼠生成所有的網頁安全格式確保你告訴生成器添加你創建的字形的Unicode範圍。一旦我忘記這樣做，應用程序只添加a-z範圍內的字形。一個簡單的檢查方法是查看演示html頁面中的gyphs選項卡，並確保包含所有圖標。

您正在使用正確的CSS3字體規則並嵌入eot，ttf，woff和svg，並且您已經等了一會兒。我注意到一些舊的iPhone手機需要永久顯示字體。

使用像modernizr font-face feature detect這樣的工具可能會讓瀏覽器之間的一些支持更容易一些。

我很好奇，看看問題是什麼。因爲它是在官方網站上提到的

來源

2013-03-04 05:41:36 Jesse

+0

我試圖使用Modernizr「font-face」功能檢測進行回退，但opera和BlackBerry 6都會返回true，因爲它們支持該功能。 **如何檢測FontAwesome字體是否已加載？** – Gonzalo 2013-03-04 20:38:12

+0

什麼字體有效？如果你嘗試谷歌字體和那些工作，我猜測它的字形映射與字體真棒。 – Jesse 2013-03-05 07:58:59

+0

許多Web字體正在工作。事實上，唯一不起作用的字體是FontAwesome。我測試了一些Google字體，例如：** http：//fonts.googleapis.com/css？family = Devonshire **。 @ font-face { font-family：'德文郡'; font-style：normal; font-weight：400; src：local（'Devonshire-Regular'），url（http://themes.googleusercontent.com/static/fonts/devonshire/v2/aaQyvbEWf33gEr0fgtqsrRsxEYwM7FgeyaSgU71cLG0.woff）format（'woff'）; } – Gonzalo 2013-03-05 10:31:40

3

的Opera Mini不支持字體面 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不支持FontAwesome在IOS 6.1 font awesome fault in ios

NEIT她的其他字體面的實例工作（http://codepen.io/bennettfeely/full/ErFGv） enter image description here

但使用SVG似乎是一個很好的解決方案，這個概念 原始來源的證明：http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/

enter image description here

來源

2013-03-06 00:59:22 Theodore

1

作爲參考，我有這個問題，問題是域。在某些瀏覽器中，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;

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

來源

2013-06-07 04:43:36

0

我也有我得到一個SVG字體顯示在黑莓的問題。問題是svg的名稱（在文檔中）和字體系列的名稱必須相同。我在這裏找到這個答案，在意見到最後回答：

@fontface on blackberry os 7

來源

2013-07-01 11:50:24 emik

2

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

  2. 按下按鈕圖標庫

  3. 圖書館加入字體真棒

  4. 選擇你想要的圖標

  5. 按下按鈕字體（出口圖標CSS字體真棒）

  6. 替換字體真棒（TTF，SVG。等...）用新字體真棒

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";}

我試試這個，然後真棒字體工作在Opera移動:)

來源

2013-08-29 14:15:14 Frin

0

使用icomoon應用http://icomoon.io/app/改變SVG字體到網頁字體並替換Font Awesome的舊字體。它適用於歌劇手機中的我

來源

2014-05-10 13:03:47 Misikir

相關問題

 相關問題