html - @font-face 嵌入式字体不显示在 Android 浏览器选择标签中

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

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

截图:

在桌面版 Chrome 中正确显示:

非事件选择在 Android 浏览器中正确显示:

在 Android 浏览器中单击选择时显示乱码:

我使用以下 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;
}

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

最佳答案

你不能。我猜浏览器正在尝试做正确的事情，但 native 控件不使用默认系统字体以外的其他字体。

也许这在较新版本的 Android 或 Android 上的其他浏览器(例如 Chrome)中已修复。

您需要在 JS 中制作您自己的选择标记副本，该副本使用 HTML 来组成控件。

类似于 http://harvesthq.github.com/chosen/会做你需要的，虽然很遗憾，因为 native 控件通常在很多方面都更好(除了这个问题!)

关于html - @font-face 嵌入式字体不显示在 Android 浏览器选择标签中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12251622/

相关文章：

html - 在面包屑箭头形状的元素之间添加白色分隔符