@font-face使用Google字体

Question

我已经在使用来自谷歌的字体，它的效果很好:

@font-face {
    font-family: 'Chivo';
    font-style: normal;
    font-weight: 900;
    src: local('Chivo Black'), url(http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff) format('woff');
}

现在我需要从 Google 获得另一种字体，但我不知道该如何获取该 URL。 Google Fonts 上唯一可见的 URL 是（例如此字体）：

<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>

但是如果我将src替换为googleapis的url，字体就无法加载。

- user2779312

---

如果该字体也在Google字体库中，尝试选择它们两个并从Google获取新的<link>，该链接将提供所有选定的字体并准备好使用。 - Patrick

这正是我的困扰，我无法直接从谷歌找到那个<link>。我只看到一个fonts.googleapis.com的网址。 - user2779312

前往http://www.google.com/fonts，选择所有需要使用的字体并将它们添加到您的收藏中，然后点击“使用”- 向下滚动。 - Patrick

Answer 1

为了找到所有的谷歌字体，您可以访问这里：http://www.google.com/fonts 不建议使用@font-face与谷歌字体... 他们将（也应该）为您提供所有“谷歌”字体的托管。您在新位置托管它们只是形式不当... 如果另一个用户访问具有相同字体但从Google提供的网站，则必须对您的位置进行新的服务器调用...而不是使用Google缓存版本。

要使用多个字体，请在链接标记中的名称之间放置“管道”字符（Shift + Backslash = |）。

<link href='http://fonts.googleapis.com/css?family=Audiowide|Exo+2|Rambla|Scada' rel='stylesheet' type='text/css'>

然后在您的字体系列标签中，根据需要调用相应的字体：

font-family: 'Audiowide', cursive;
font-family: 'Exo 2', sans-serif;
font-family: 'Rambla', sans-serif;
font-family: 'Scada', sans-serif;

- Phlume

---

这不是我需要的，朋友。我需要知道在哪里获取URL（例如themes.googleusercontent.com/foo），或者当前的URL是什么（例如ttp://fonts.googleapis.com/foo）？如果是这样，如何在@font-face中使用它。谢谢。 - user2779312

Answer 2

您的代码仅适用于支持可下载字体WOFF的浏览器。这是直接从Google服务器发送给某些浏览器的一些代码。Google服务器向不同的浏览器发送不同的CSS代码，而您的代码破坏了这一点。此外，并不能保证URL将继续工作。像http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff这样的URL不能指望稳定，谷歌也没有声明支持使用这些URL。

您可以通过简单地查看页面的CSS代码来继续使用剽窃策略和其缺点。例如，在Firefox上，您可以使用Web Developer扩展程序，该扩展程序具有查看页面所有CSS文件的命令。然后，您将复制相关CSS文件的内容。

更好的方法-假设您不想使用由Google提供的字体-是从Google下载字体文件（Google Web Fonts页面也有一个界面，尽管他们一直告诉您不需要使用它），然后生成各种字体格式和CSS文件，如FontSquirrel WebFont Generator。结果可能与使用Google托管字体时获得的结果不同；谷歌没有透露他们的字体文件是如何生成的。

- Jukka K. Korpela