Google 글꼴에 Chrome 및 IE가 표시되지 않습니다.

Question

해당 포함어를 사용하여 Google 글꼴 코드를 사용하고 있습니다. 그들의 CSS는 다음과 같습니다이 사용

이

@font-face { 
    font-family: 'Oswald'; 
    font-style: normal; 
    font-weight: 300; 
    src: url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot); 
    src: local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDfY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/oswald/v7/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 

내가

.oswald { 
    font-family: 'Oswald', Verdana, Arial, Helvetica, sans-serif 
} 

그럼 내가 조금 이상한 얻는 곳

<div class="oswald">text</div> 

처럼 여기 것을 사용하는 CSS 클래스를 만들었습니다. Visual Studio를 사용하고 있으므로 로컬에서 디버깅 할 때 올바른 글꼴을 볼 수 있습니다. 서버에 올려 놓으면 Verdana 글꼴을 보여줍니다. Chrome은 잘못된 앞을 보여줍니다. 사파리와 파이어 폭스 모두 올바른 글꼴을 보여줍니다.

Answer 1

Oswald Regular를 필요한 @font-face 형식 (TTF, OTF, EOT, SVG, WOFF)으로 변환했습니다.

@font-face { 
    font-family: 'Oswald'; 
    font-style: normal; 
    font-weight: 300; 
    src: url('Archive/Oswald-Regular.eot'); 
    src: local('Oswald'), url('Archive/Oswald-Regular.woff') format('woff'), url('Archive/Oswald-Regular.ttf') format('truetype'), url('Archive/Oswald-Regular.svg#Oswald-Regular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

그리고 여기에 변환 된 글꼴이 포함 된 ZIP 압축 파일에 대한 링크입니다 : http://www.mediafire.com/?9xdr1w9wyvdoh09

Answer 2

내가 더 신뢰할 수 많은 규칙 @import는 CSS를 사용하여 찾기 필요한 글꼴의 5 배 형식이 필요 피한다 브라우저 호환성. 이것을 CSS 파일의 상단에 버리십시오 :

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300); 

PS. 여기에는 Oswald의 light(), regular (font-weight: 400) 및 bold (font-weight: 700)가 포함됩니다.