字体（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;”替换为某些字体（包括谷歌网络字体），那么问题就开始了。

这是“bug”正在发生的截图。

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

编辑： http://jsfiddle.net/burCR/

- Marko Jovanović

---

很难看到问题，fiddle只是一个输入框。需要看到页面和CSS的其他部分。 - frontsideup

我知道在其他浏览器中（如Coda）会发生这种情况，但只针对某些输入表单。你能突出显示文本吗？也许是background-color:white;？ - Luke

嗨，马尔科，我已经在Mac 10.7.3上的Opera v.11.62中检查了这个jsfiddle，并没有发现任何问题。你有一个实时版本吗？我很感兴趣想看看。 - frontendzzzguy

这个小提琴确实有问题，我在自己的网站上也遇到了同样的Opera问题。目前有什么解决方案吗...？ - Hein

Opera 12.15仍存在Bug。 - anno

Answer 1

你尝试过直接在你的CSS中指定字体吗？例如：

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

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

如需额外帮助，请提供自定义字体的名称、完整的 CSS 代码以及您网站的实时链接。

- Capagris

Answer 2

你可以单独为背景和文本指定颜色。

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

- Timmah

Answer 3

同样可以直接指定字体。您也可以尝试使用base64编码，根据我的经验，它具有良好的跨浏览器兼容性并且效果很好。

- Ricardo Parker

Answer 4

尽管这可能是一些显而易见的事情，请确保您的字体与Opera兼容。以下是一些Web安全字体的列表。

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

如果这不起作用，请尝试从Microsoft Word中获取所需字体，然后使用@fontface插入自定义字体，而不是使用Web安全字体。

最后，请尝试在表单上使用您的font-family，并使输入继承该字体。希望这可以帮到你。

- user2489995