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');
}

现在我需要谷歌的另一种字体，我不知道在哪里选择该网址。我在谷歌字体上看到的唯一网址是（例如这个字体）：

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

但googleapis网址不起作用，如果我用该网址替换src没有加载字体。

Answer 1

要找到您可以访问的所有Google字体：

http://www.google.com/fonts

建议不要将@ font-face与google字体一起使用...

他们将（并且应该）为您托管所有“google”字体。让你在一个新的位置托管他们只是糟糕的形式...如果另一个用户访问了一个具有相同字体的网站，但是从谷歌服务，他们将不得不对你的位置进行新的服务器调用...而不是使用谷歌的兑现版本。

要使用多种字体，请在链接标记中的名称之间放置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;

Answer 2

您的代码仅适用于支持可下载字体的WOFF的浏览器。这只是将Google服务器发送的某些代码扯到某些浏览器的直接后果。 Google服务器会向不同的浏览器发送不同的CSS代码，您的代码会破坏它。此外，无法保证URL将继续有效。网址如 http://themes.googleusercontent.com/static/fonts/chivo/v4/uOXSiKkEygwkvR4cgUzOz_esZW2xOQ-xsNqO47m55DA.woff不应该保持稳定，Google也没有声明支持使用此类网址。

您可以通过在浏览器中查看页面的CSS代码来继续执行具有缺点的扯掉策略。例如，在Firefox上，您可以使用Web Developer Extension，它具有查看页面的所有CSS文件的命令。然后，您将复制相关CSS文件的内容。

更好的方法 - 假设您不想使用Google托管的字体 - 是从Google下载字体文件（Google网络字体页面也有这样的界面，尽管他们一直告诉你不要需要使用它）然后生成各种字体格式和CSS文件，例如与FontSquirrel WebFont Generator。结果可能与使用Google托管字体获得的结果不同; Google没有详细说明他们的字体文件是如何生成的。

@ font-face with Google font

2 个答案: