2012-09-03 29 views
0

我在我的網頁中使用@ font-face的嵌入式ttf字體。@在Android Browser中不顯示的font-face嵌入字體選擇標籤

問題是,無論何時使用它來顯示選擇標籤中的項目或選項,除了當前選擇的項目之外的所有內容都會在Android瀏覽器中顯示爲亂碼。當我在Chrome等桌面瀏覽器中嘗試它時,它會正確顯示。

截圖:

正確顯示在桌面版Chrome:

Properly displayed in desktop Chrome http://img339.imageshack.us/img339/8676/pro1n.jpg

無效選擇顯示在Android瀏覽器正常:當我點擊選擇

inactive select android browser http://img59.imageshack.us/img59/4025/pro2d.jpg

亂碼顯示在Android瀏覽器中:

inactive select android browser http://img833.imageshack.us/img833/1461/pro3d.png

我使用下面的CSS嵌入字體:

@font-face{ 
font-family: "MyFont"; 
src: url('../fonts/MyFont.ttf') format('truetype'); 
} 

和應用的字體選擇標籤下面的CSS規則:

select{ 
font-family: MyFont !important; 
font-size: 16px; 
} 

select option{ 
font-family: MyFont !important; 
font-size: 16px; 
} 

我已經使用在整個網頁中使用相同的字體,除了選擇標籤外,它在任何地方都能正常工作。 我該如何解決這個問題?

回答

1

你不能。瀏覽器試圖做我猜想的正確的事情,但本地控制不使用默認系統之外的其他字體。

也許這在較新版本的Android或其他Android版瀏覽器(例如Chrome)中得到修復。

您需要在JS中使用HTML來製作自己的選擇標籤副本,以便進行控制。

喜歡的東西http://harvesthq.github.com/chosen/會做你需要什麼,儘管這是一個恥辱,因爲本機控件在很多方面通常好於Android的瀏覽器`溢出

+0

選上是不行的(比這個問題的其他!):滾動'不支持。 – ajaybc

+0

啊,好吧,你明白我的意思了,還需要一些其他的自定義控件。 –