为什么在 chrome 和 opera 中使用选择框作为字体时，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;
}

我使用 OpenSans 字体作为字体，并使用 fontsquirrel webfontkit 工具。对于 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;
}