@ font -face with Google font

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的另一种字体，但我不知道从哪里去选择那个url。我在google字体上看到的唯一url是(例如这个字体)是：

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

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

Answer 1

你的代码只适用于支持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文件的内容。

一个更好的方法-假设你不想使用谷歌托管的字体-是从谷歌下载字体文件(谷歌网页字体页面也有一个接口，尽管他们一直告诉你不需要使用它)，然后生成各种字体格式和CSS文件，例如使用FontSquirrel WebFont Generator。结果可能与您使用Google托管字体得到的结果不同；Google不会透露他们的字体文件是如何生成的。

Answer 2

要找到所有的Google字体，你可以转到这里：

http://www.google.com/fonts

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

他们将(也应该)为你托管所有的"google“字体。让你把它们放在一个新的地方是很糟糕的。如果另一个用户访问了一个具有相同字体的站点，但是来自谷歌的服务，他们将不得不对你的location...rather进行一个新的服务器调用，而不是使用谷歌拥有的现金版本。

要使用多种字体，请在链接标记中的名称之间放置一个pipe字符(Shift +反斜杠= | )：

<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;