@ font-face与Google字体

Question

我已经在使用Google的字体，它可以按预期工作：

@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提供的另一种字体，但我不知道在哪里选择该网址。我可以在Google字体上看到的唯一网址是（例如，该字体）：

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

但是googleapis网址不起作用，如果我用该网址替换src，则不会加载任何字体。

Answer 1

您的代码仅适用于支持 WOFF 可下载字体的浏览器。这是窃取 Google 服务器发送到某些浏览器的某些代码的直接后果。Google 服务器将不同的 CSS 代码发送到不同的浏览器，而您的代码会破坏这一点。此外，无法保证 URL 将继续有效。像 \n http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff这样的网址不应稳定，并且 Google 尚未声明支持使用此类网址。

\n\n

您可以通过简单地在浏览器中查看页面的 CSS 代码来继续采用抄袭策略，尽管它有其缺点。例如，在 Firefox 上，您可以使用 Web 开发人员扩展，它具有用于查看页面的所有 CSS 文件的命令。然后您将复制相关 CSS 文件的内容。

\n\n

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

\n

Answer 2

要找到所有Google字体，您可以在这里：

http://www.google.com/fonts

使用@ font-face不推荐使用谷歌的字体...

他们将（并且应该）为您托管所有“ google”字体。让您将它们托管在新位置是一种糟糕的形式...如果另一个用户使用相同的字体访问了一个站点，但是却以Google的形式提供了服务，那么他们将不得不对您的位置进行新的服务器调用...而不是使用Google的现金版本。

要使用多种字体，请在链接标记的名称之间放置一个pipe字符（Shift + Backslash = |）：

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

然后到您的font family标签可以根据需要调用适当的字体：

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