7

当我在我的 CSS 文件中使用 @import 规则添加谷歌网络字体时，它工作正常。

但是当我下载该字体并将其本地存储在我的服务器中，然后将@font-face 规则定向到我自己的机器时，它不起作用。

所以我所做的是在我的 css/fonts.css 文件中替换这一行：

@import url(http://fonts.googleapis.com/css?family=Michroma);

有了这个：

@font-face {
font-family: 'Michroma';
font-style: normal;
font-weight: 400;
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff');
}

换句话说，我只是从 googleapi 中复制了该字体的代码。我将字体文件（.woff）保存在上面的路径中（我已经重新检查过，确实存在）。

我也尝试将网址编辑为此，但不好：

src: url(fonts/michroma/michroma.woff) format('woff');

如果我们在本地使用 Google 网络字体，我无法相信有任何理由无法使用它们，所以我所做的一定有问题。线索？这不就是我们如何定义自己的字体吗？（我以前从未尝试过）。

4

2 回答 2

2

如评论中所述，问题的原因是 URL 中字体名称的拼写错误。

这是一种在本地使用 Google 字体的方法。正确的方法是使用相对 URL，例如 fonts/michroma/michroma.woff，而不是 http: 带有 localhost 的 URL（它们需要您在计算机上运行 HTTP 服务器）。

但是，它不适用于不支持 WOFF 格式的浏览器（在这种情况下）。一般来说，使用谷歌字体作为远程托管更好，因为他们知道如何为不同的浏览器提供不同的字体格式。参照。我应该在本地存储由 Google Web Fonts API 生成的 CSS 吗？

于 2012-09-10T11:24:13.603 回答
1

在单一字体中，不需要字体系列名称的引号。你应该删除并运行它会正常工作。字体系列：Michroma；

于 2012-09-10T09:58:25.560 回答