0

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

4

2 回答 2

2

我已将 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

于 2013-04-26T02:29:38.367 回答
0

我发现使用 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)。

于 2013-04-26T03:31:57.113 回答