Font-face，在Opera浏览器中混淆自动完成下拉列表

Question

正如我在标题中提到的，当使用css font-family，自定义字体（font-face）时，它会混淆（黑色背景，黑色文本（我猜））Opera中的自动完成下拉列表。

input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
    font-size: 1.2em;
    font-family:  sans-serif;
    color: #2A873A;
    padding-left: 25px;
}

上面的代码工作正常，但如果我替换“font-family：sans-serif;”使用一些font-face字体（谷歌网络字体），然后问题开始。

以下是“bug”的截图。

P.S。我应该提一下，这是Opera的原生自动完成，而不是自定义js，下拉列表。

修改 http://jsfiddle.net/burCR/

Answer 1

您是否尝试直接在css中指定字体？例如：

div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}

请记住，嵌套元素会受到自定义字体的影响，因此如果您不执行上述操作，您的“嵌套元素”中也可能需要font-family:inherit。

如需额外帮助，请提供自定义字体的名称，完整的css以及指向您网站的实时链接

Answer 2

虽然这可能是显而易见的，但请检查以确保您的字体与Opera兼容。以下是一些网络安全字体的列表。

http://www.w3schools.com/cssref/css_websafe_fonts.asp

如果这不起作用，请尝试从microsoft word获取所需的字体，并使用@fontface插入自定义字体，而不是使用网页安全字体。

最后尝试在表单上使用font-family并让输入继承字体。 希望这有所帮助。

Answer 3

同样直接指定字体。您可能还想尝试使用base64编码，根据我的经验，它可以很好地工作，并且具有出色的跨浏览器兼容性。

Answer 4

您可以分别指定背景和文本的颜色。

input   {
    background-color: white;
    color: black;
    font-family: "My Fontface Font", Verdana, ms serif;
}