为什么在使用“选择框”作为“铬”和“歌剧”中的字体面时，opera字体似乎已损坏？

Question

<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字体作为字体面，并使用方松鼠webfontkit工具.一切似乎正常的ff，即狩猎，但当打开页面的铬或歌剧，它似乎如下所示；

​

我的代码如上所示。为什么字体似乎被铬和歌剧破坏了？

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;
}