在Chrome和Opera中将select框用作字体时，为什么Open Sans字体似乎已损坏？

Question

HTML

<select multiple="multiple">
    <option>Option-1</option>
    <option>Option-2</option>
    <option>Option-3</option>
    <option>Option-4</option>
    <option>Option-5</option>
</select>

CSS

@font-face {
    font-family: 'OpenSansRegular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg'),
    url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('OpenSans-Regular-webfont.woff') format('woff'),
    url('OpenSans-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

select {
    width: 150px;
    height: 150px;
    padding: 10px;
    font-size: 18px;
    margin: 20px;
    font-family: 'OpenSansRegular',Arial,sans-serif;
    font-weight: normal;
}

我使用fontsquirrel webfontkit工具将OpenSans字体用作字体。 对于ff，safari来说，一切似乎都很正常，但是在chrome或Opera中打开页面时，它看起来像下面的图像；

我的代码如上所述。 为什么Chrome和Opera的字体似乎损坏了？

Answer 1

您可以尝试更改已加载源文件的顺序吗？ 就像将svg放在列表的底部。

也许他正在尝试将svg渲染到选择框中，然后搞砸了。

@font-face {
    font-family: 'OpenSansRegular';
    src: url('OpenSans-Regular-webfont.eot');
    src: url('OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('OpenSans-Regular-webfont.woff') format('woff'),
    url('OpenSans-Regular-webfont.ttf') format('truetype'),
    url('OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}