css - Google 字体不显示 Chrome 和 IE

Question

我正在使用他们的 include 引入 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');
}

使用它我创建了一个 css 类

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

然后我就这样用了

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

这里有点奇怪。我正在使用 Visual Studio，所以当我在本地调试它时，我看到了正确的字体。当我把它放在服务器上时，它向我展示了 Verdana 字体。 Chrome 也显示错误的前端。 Safari 和 Firefox 都显示正确的字体。

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