尝试为选择选项菜单提供font-family

Question

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

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

你知道我怎样才能将font-family设置为适用于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上我得到了这个：

Answer 1

这很可能取决于你如何嵌入bariol_regularregular字体。

您没有后备字体，因此浏览器将：

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

如果您已正确嵌入Chrome而非IE，则可以使用以下解决方案： Safari and IE can't read TTF and EOT fonts

使用Google字体中的类似字体可能是一个更快速的解决方案 - 他们会为您完成所有这些。

Answer 2

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

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

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