CSS 本地存储的 Google 网络字体与在线源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12348529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google web fonts stored locally versus online source
提问by user961627
When I add google web fonts using the @import rule in my CSS file, it works fine.
当我在 CSS 文件中使用 @import 规则添加 google web 字体时，它工作正常。
But when I download that font and store it locally in my server and then direct the @font-face rule to my own machine, it doesn't work.
但是当我下载该字体并将其本地存储在我的服务器中，然后将 @font-face 规则定向到我自己的机器时，它不起作用。
So what I did was to replace this line, in my css/fonts.css file:
所以我所做的是在我的 css/fonts.css 文件中替换这一行：
@import url(http://fonts.googleapis.com/css?family=Michroma);
with this:
有了这个：
@font-face {
font-family: 'Michroma';
font-style: normal;
font-weight: 400;
src: url(http://localhost/xampp/mysite/css/fonts/michroma/micrhoma.woff) format('woff');
}
In other words, I just copied the code from the googleapi for that font. And I saved the font file (.woff) in the path above (I've rechecked, it is indeed there).
换句话说，我只是从 googleapi 复制了该字体的代码。我将字体文件 (.woff) 保存在上面的路径中（我已经重新检查过，它确实在那里）。
I tried editing the url to this as well, but no good:
我也尝试将 url 编辑为此，但没有好处：
src: url(fonts/michroma/michroma.woff) format('woff');
I can't believe there's any reason why Google web fonts wouldn't work if we used them locally, so there must something wrong with what I'm doing. Clues? Isn't this how we define our own font faces anyway? (I've never tried that before).
如果我们在本地使用 Google 网络字体，我无法相信有任何理由无法使用它们，所以我所做的一定有问题。线索？这不是我们定义自己字体的方式吗？（我以前从未尝试过）。
回答by Jukka K. Korpela
As indicated in the comments, the cause of the problem was misspelling of the font name in the URL.
正如评论中所指出的，问题的原因是 URL 中字体名称的拼写错误。
This is a way to use Google fonts locally. The proper way is to use relative URLs like fonts/michroma/michroma.woff and not http: URLs with localhost (they would require you to run an HTTP server on your computer).
这是一种在本地使用 Google 字体的方法。正确的方法是使用相对 URL，如 fonts/michroma/michroma.woff 而不是 http: 带有 localhost 的 URL（它们需要您在计算机上运行 HTTP 服务器）。
However, it would not work on browsers that do not support the WOFF format (in this case). Generally, using Google Fonts as remotely hosted is better, since they know how to serve different font formats to different browsers. Cf. to Should I locally store CSS generated by the Google Web Fonts API?
但是，它不适用于不支持 WOFF 格式的浏览器（在这种情况下）。通常，使用远程托管的 Google 字体会更好，因为它们知道如何为不同的浏览器提供不同的字体格式。参见 以通过谷歌网页字体API生成的，我应该本地存储CSS？
回答by Web Designer cum Promoter
in single font the quotes for font family name is not needed. you should remove and run it will works fine. font-family: Michroma;
在单一字体中，不需要字体系列名称的引号。你应该删除并运行它会正常工作。字体系列：Michroma；
