本地存储的谷歌网络字体与在线源答案

【问题标题】：Google web fonts stored locally versus online source本地存储的谷歌网络字体与在线源
【发布时间】：2012-09-10 19:24:13
【问题描述】：

当我在我的 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 网络字体，我无法相信有任何理由无法使用它们，所以我所做的一定有问题。线索？这不就是我们定义自己的字体的方式吗？（我以前从未尝试过）。

【问题讨论】：

标签： css fonts import font-face google-webfonts

【解决方案1】：

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

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

但是，它不适用于不支持 WOFF 格式的浏览器（在这种情况下）。一般来说，使用谷歌字体作为远程托管更好，因为他们知道如何为不同的浏览器提供不同的字体格式。参照。给Should I locally store CSS generated by the Google Web Fonts API?

【讨论】：

离题但相关：要将 .ttf 字体转换为大多数浏览器支持的更多格式，请访问 FontSquirrel：fontsquirrel.com/fontface/generator。刚发现，太棒了。

【解决方案2】：

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

【讨论】：

引号是可选的，因此删除它们不太可能解决任何问题。
@user961627，你是什么意思？您的评论是否与建议的答案有关？我仍然可以用 Michroma 重现您的问题（在 IE、Firefox、Chrome 上测试），但不能用另一种字体 Rye 重现，所以我怀疑这是一个特定于字体的问题。你重新加载字体了吗？（我刚刚做了，但没有帮助。）
问题只是源 URL 中的拼写错误，我想我输入了“mihcroma”而不是 michroma。试图删除这个问题，但唉。
对，就是这样。我在测试中修改了您的代码，但没有检查名称的拼写。