尝试为选择选项菜单提供字体系列答案

【问题标题】：Trying to give a font-family for a select option menu尝试为选择选项菜单提供字体系列
【发布时间】：2014-08-19 17:23:06
【问题描述】：

我试图为我的选择菜单选项提供一个字体系列，但它不起作用。

我正在尝试使用下面的这段代码，它似乎适用于谷歌浏览器，但在 Internet Explorer 上我有不同的字体系列。

您知道如何将字体系列设置为适用于 chrome 和 Internet Explorer 的选项吗？？

这是我的html：

<div class="select_teams">
        <select name="teams">
           <option class="option">Select your team:</option>
           <option class="option" value="1">ACM</option>
           <option class="option" value="2">PSG</option>
           <option class="option" value="2">RM</option>
        </select>
 </div>

这是我的 CSS：

.select_teams select{min-width:250px; padding:10px; border:3px solid #CCC; font-size:18px;}
.select_teams .option{transition:none; font-family:'bariol_regularregular';}

在 chrome 和 mozilla 上我得到了这个：

在 Internet Explorer 上我得到了这个：

【问题讨论】：

标签： html css

【解决方案1】：

这很可能取决于您嵌入 bariol_regularregular 字体的方式。

你没有备用字体，所以浏览器会：

1 ) 尝试使用 bariol_regularregular 2 ) 使用浏览器的默认字体

如果您为 Chrome 而不是 IE 正确嵌入了它，这是一个可能的解决方案： Safari and IE can't read TTF and EOT fonts

使用来自 Google Fonts 的类似字体可能是一种更快的解决方法 - 它们会为您完成所有这些工作。

【讨论】：

感谢您的回答 Richard B。所以我会尝试使用 verdana 而不是 bariol。但即使我使用这个 css： .posts select_teams .option{transition:none; font-family:Verdana, Geneva, sans-serif;} on internet explorer 我总是有不同的字体。你知道为什么会这样吗？
我已经尝试在谷歌字体上找到类似 bariol 的字体系列，但我从来没有找到！
将其应用于您的选择而不是选项似乎有效。也可以使用您的原始字体（但请记住，确实需要嵌入，因为它不是网络安全的）。
非常感谢您的帮助。但即使使用您的代码，使用！important，我也有相同的结果。正如您在我的问题更新中看到的那样，在 Internet Explorer 上，我的字体系列与我的 chrome 和 mozilla 不同。
我的 jsfiddle 链接也不起作用吗？如果是这样，您能否更新问题中的 css 以显示您尝试实现它的具体方式。

【解决方案2】：

在select 元素上设置字体，而不是在option 元素上。示例：

.select_teams { font-family: 'bariol_regularregular'; }

原因是 IE 对 option 元素使用统一的样式，基于其父 select 元素的样式，而不是让我们单独设置样式选项。参照。到Styling options in bold in Internet Explorer。

【讨论】：

谢谢 Jukka K.Korpela。现在我通过您的回答了解了 IE 上的问题。但是您的解决方案仍然无法在 Internet Explorer 上运行！
我在 IE 11 中测试了解决方案，同时使用了低至 IE 5 的仿真模式，自然使用了我系统中实际存在的字体。如果它不适合您，请检查 bariol_regularregular 字体是否有问题：它是否适用于正常内容（例如，对于 p 元素）？