谷歌网络字体本地存储与在线来源

当我在我的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）保存在上面的路径中（我已经重新检查过，它的确在那里）。

我试图编辑URL这个为好，但没有好：

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

我不相信有任何理由，如果我们在本地使用它们谷歌网页字体是行不通的，所以要有我在做什么不对。线索？这不是我们如何定义自己的字体？（我从来没有尝试过）。

来源

2012-09-10 user961627

单字体不需要字体系列名称的引号。你应该删除并运行它将正常工作。 font-family：Michroma;

来源

2012-09-10 09:58:25

其实现在好了！ – user961627

引号是可选的，所以删除它们不可能解决任何问题。 –

@ user961627，你是什么意思？你的评论与建议的答案有关吗？我仍然可以通过Michroma（在IE，Firefox，Chrome上测试）重现您的问题，但不能与另一种字体Rye一起使用，所以我怀疑这是一个字体特定的问题。你重新加载字体？（我刚刚做了，但没有帮助。） –

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

这是一种在本地使用Google字体的方法。正确的方法是使用像fonts/michroma/michroma.woff这样的相对URL而不是http：URL与localhost（它们会要求你在你的计算机上运行一个HTTP服务器）。

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

来源

2012-09-10 11:24:13

偏离主题但相关：为了将.ttf字体转换为大多数浏览器支持的更多格式，请转到FontSquirrel：http://www.fontsquirrel.com/fontface/generator。刚刚发现它，它很棒。 – user961627

谷歌网络字体本地存储与在线来源

回答

相关问题