크롬 및 오페라에서 글꼴 상자로 선택 상자를 사용할 때 왜 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, 즉 사파리에서는 정상적으로 보이지만 크롬이나 오페라의 페이지가 열리면 아래 이미지처럼 보입니다.

위 코드와 같습니다. 왜 크롬과 오페라 글꼴이 손상된 것 같습니까?

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