Css 本地存储的Google web字体与在线源

当我在CSS文件中使用@import规则添加google web字体时，效果很好

但是，当我下载该字体并将其本地存储在我的服务器上，然后将@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');

---

我不敢相信，如果我们在本地使用谷歌网页字体，有任何理由说明谷歌网页字体不起作用，所以我所做的一定是出了问题。线索？这不是我们定义自己字体的方式吗？（我以前从未尝试过）。

在单字体中，不需要字体系列名称的引号。您应该删除并运行它，它将正常工作。

---

字体系列：Michroma

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

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

---

但是，它在不支持WOFF格式的浏览器上不起作用（在本例中）。一般来说，使用远程托管的Google字体更好，因为他们知道如何为不同的浏览器提供不同的字体格式。Cf.to

引号是可选的，所以删除它们不可能解决任何问题。@user961627，你是什么意思？你的评论与建议的答案有关吗？我仍然可以用Michroma（在IE、Firefox、Chrome上测试）重现你的问题，但不能用另一种字体Rye，所以我怀疑这是一个特定于字体的问题。你重新加载字体了吗？（我只是这样做了，但没有帮助。）问题只是源URL中的拼写错误，我想我键入的是“mihcroma”而不是michroma。试图删除这个问题，但唉，对了，就是这样。我在测试中修改了您的代码，但没有检查名称的拼写。非主题但相关：要将.ttf字体转换为大多数浏览器支持的更多格式，请转到FontSquirrel:。刚发现，太棒了。