谷歌字体不显示 Chrome 和 IE答案

【问题标题】：Google Fonts not showing Chrome and IE谷歌字体不显示 Chrome 和 IE
【发布时间】：2013-04-20 02:27:16
【问题描述】：

我正在使用他们的包含来提取谷歌字体代码。他们的 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 都显示正确的字体。

【问题讨论】：

标签： css internet-explorer google-chrome font-face

【解决方案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

【讨论】：

Chrome 已经修复了，IE 有什么想法吗？

【解决方案2】：

我发现使用 css @import 规则更加可靠，并且避免了浏览器兼容性所需的 5x 字体格式。将其放到 CSS 文件的顶部：

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

PS。这将包括：Oswald 的浅色 (font-weight: 300)、常规 (font-weight: 400) 和粗体 (font-weight: 700)。

【讨论】：

这就是我所拥有的，我只是将他们的 CSS 粘贴在这里，以便您可以看到所有内容。