css - 本地存储的 Google 网络字体与在线资源

Question

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

但是当我下载该字体并将其本地存储在我的服务器中，然后将@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)保存在上面的路径中(我已经复查过，确实存在)。

我也试过编辑这个的 url，但没有用:

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

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

Answer 1

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

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

但是，它不能在不支持 WOFF 格式的浏览器上运行(在这种情况下)。通常，使用远程托管的 Google Fonts 更好，因为他们知道如何为不同的浏览器提供不同的字体格式。比照。至 Should I locally store CSS generated by the Google Web Fonts API?