Question

我在网页中使用@ font-face嵌入式ttf字体。

问题是每当我用它来显示select标签中的项目或选项时，除了当前所选项目之外的所有内容在Android浏览器中都会显示为乱码。当我在Chrome等桌面浏览器中试用它时，它会正常显示。

截图：

在桌面Chrome中正确显示：

在Android浏览器中无法正常显示：

当我点击Android浏览器中的选择时显示的是Gibberish：

我使用以下CSS嵌入字体：

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

以及将字体应用于select标记的以下CSS规则：

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

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

我在整个网页上使用了相同的字体，除了select标签之外，它在任何地方都正常工作。我该如何解决这个问题？

Answer 1

你做不到。浏览器正在尝试做正确的事情，但是本机控件不使用默认系统之外的其他字体。

这可能是在较新版本的Android或Android上的其他浏览器（例如Chrome）中修复的。

您需要在JS中创建自己的选择标记副本，该副本使用HTML来进行控制。

像http://harvesthq.github.com/chosen/之类的东西会做你需要的东西，虽然这很遗憾，因为原生控件通常在很多方面都比较好（除了这个问题！）