Question

我正在使用他们的include来提取谷歌字体代码。他们的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

Answer 2

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

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

PS。这将包括：奥斯瓦尔德的灯光（font-weight: 300），常规（font-weight: 400）和粗体（font-weight: 700）。

Google字体未显示Chrome和IE

2 个答案: