谷歌字体_优化Google Web字体

Google Web字体是在网站上嵌入自定义字体的较流行的方法之一。它是免费的，并且库中有很多选项可供选择。尽管可以通过快速的Google服务器提供服务，但仍有一些地方需要改进。

因此，让我们来看看如何改善Google Webfont的性能。

提供某些字体样式

Google Webfont中的字体提供了粗体，斜体，浅色等字体样式。将所有这些字体样式添加到规范中将增加字体大小，并且还会影响页面加载性能。

如下所示，通过取消选择某些样式，页面加载将变得更快。

Google使我们可以轻松地仅包含所需的样式。在下面的示例中，我们仅选择Roboto Condensed字体家族的浅色和常规版本。

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>

我们可以从下面的屏幕截图中看到，如果未在Google Webfont样式表中指定，则粗体样式无法正确呈现。

但是，由于浏览器加载的字体文件较少，因此可以为我们提供更好的加载时间。

您可以在下面查看演示。

观看演示

字体子设置

Google Webfont中的几种字体还提供了多种字符集来支持多种语言。例如， Roboto Condensed字体家族提供了西里尔，希腊和越南字符的字符集。 Google提供了轻松选择我们要包含的字符集的选项。

通过包含这些字符集，它将增加字体大小并损害页面加载性能。因此，将不需要的部分留空。

在此示例中，我们添加了latin ， greek和cyrillic字母。但是，我们仅在Google Webfont样式表中包括拉丁和希腊语设置，如下所示。

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,greek' rel='stylesheet' type='text/css'>

因此，不会使用Goole Webfont的Roboto Condensed字体系列渲染西里尔字母。

请观看现场演示，以查看实际的字体。

观看演示

服务某些信件

有时，我们知道要嵌入网站的某些字母。因此，提供字体家族的整个字体字母将变得毫无用处。 Google Webfont提供了仅包含必需字符的选项。

我们可以通过在字体系列名称旁边添加以下&text={letters}来包含特定字母。在以下示例中，我们如下设置Google Webfont样式表中的l ， o和g字符。

<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&text=log' rel='stylesheet' type='text/css'>

这样，我们只能使用该字体家族Roboto Condensed中的字母l ， o和g 。在我们的例子中，徽标一词很可能就是一个很好的例子。它呈现了Google Webfont规范中包含的所有字母。

通过仅包含必要的字母，可以显着减小字体大小。值得注意的是，我们包含的字母都是小写字母。这些字母的大写字母l ， o和g不会像其他所有排除的字母一样被送达。

观看演示
下载源

翻译自: https://www.hongkiat.com/blog/optimize-google-webfonts/