网页css引入字体加载慢_使用CSS字体子设置大幅降低页面加载时间

网页css引入字体加载慢

The wide availability of web fonts has enabled sites to become typographical wonderlands, at the cost of increased page size and longer load times. Performance-focused developers already optimize their images and CSS; it makes sense that we should also optimize web fonts.

Web字体的广泛可用性使站点成为印刷的仙境，但代价是页面大小增加和加载时间延长。 注重性能的开发人员已经优化了他们的图像和CSS ； 我们也应该优化网络字体是有意义的。

The good news is that doing is fairly easy: by creating your own custom font or supplying your web font hosting service with a simple variable value, you can load only the glyphs that you need for the text you have on the page, rather than the entire range of characters, numbers and symbols in the font, reducing page load times.

好消息是这样做非常容易：通过创建自己的自定义字体或为Web字体托管服务提供简单的变量值，您可以仅加载页面上文本所需的字形，而无需加载字体中所有字符，数字和符号的范围，减少了页面加载时间。

Font subsetting can be very effective, provided you keep two conditions in mind:

如果您牢记两个条件，字体子设置可能会非常有效：

• In order to use the most effective versions of this technique – loading a limited range of characters from the font – you should be certain that text rendered in that font will not change substantially in the future, as glyphs that aren’t explicitly loaded won’t display correctly.

  为了使用该技术的最有效版本-从字体中加载有限范围的字符-您应该确保以该字体呈现的文本将来不会发生实质性变化 ，因为未明确加载的字形会出现。 t正确显示。

• If you are self-hosting the web font, you should ensure that non-WOFF fonts are gzipped first, which will save an average of 40 ~ 70% on file size, before turning your attention to gaining advantages from subsetting.

  如果您是自托管Web字体，则应确保首先压缩非WOFF字体，这将平均节省40％到70％的文件大小，然后再将注意力转移到通过子集获得好处上。

子集Google字体 (Subsetting Google Fonts)

The most popular web font hosting provider has a number of options for subsets. The first is already built-in:

最受欢迎的网络字体托管提供商提供了许多子集选项。 第一个已经内置：

By default, sites will download only the Latin character subset (uppercase and lowercase A – Z, numerals, and punctuation). The “extended” Latin character subset option shouldcontain the additional characters used in other European languages: accented characters, umlauts, and the like, but the quality and extent of these characters as delivered by Googleis often limited: you may, in some situations, want to host the font yourself to gain access to the complete character set.

默认情况下，站点将仅下载拉丁字符子集(大写和小写的A – Z，数字和标点符号)。 “扩展的”拉丁字符子集选项应包含其他欧洲语言中使用的其他字符：重音字符，变音符号等，但是Google提供的这些字符的质量和范围通常受到限制：在某些情况下，您可能会，想要自己托管字体以访问完整的字符集。

The subsetting options can also be changed in the font request URL:

也可以在字体请求URL中更改子设置选项：

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin-ext,latin" rel="stylesheet">

将Google字体限制为特定字符 (Limiting Google Fonts To Particular Characters)

You can also limit the request to just the characters you need by using a text URL variable:

您还可以使用文本 URL变量将请求限制为仅需要的字符：

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

This will serve only the “H”, “e”, “l” and “o” Open Sans characters from Google, significantly reducing the size of the font request:

这将仅使用Google的“ H”，“ e”，“ l”和“ o” Open Sans字符，从而大大减小了字体请求的大小：

Full request (no subsetting):

完整请求 (无子设置)：

<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

Subsetted request

子集请求

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

This technique is perfect for webfonts used to render logos or set headlines, where the characters used will always be known in advance. Note that you can start to get into trouble if your text contains characters that are outside the stated range:

对于用于渲染徽标或设置标题的Web字体，此技术非常理想，因为所使用的字符始终会事先被知道。 请注意，如果您的文本包含超出规定范围的字符，您可能会遇到麻烦：

<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=Hello" rel="stylesheet">

Add this CSS below it:

在其下面添加此CSS：

h1 { 
	font-family: Open Sans, sans-serif;
}

Applied to this markup:

应用于此标记：

<h1>Hello, Frendo</h1>

You can see that the “F”. “r”, “n” and “d” characters do not render correctly, as they weren’t specified in our original request.

您可以看到“ F”。 由于我们的原始请求中未指定“ r”，“ n”和“ d”字符，因此无法正确呈现。

http://fonts.googleapis.com/css?family=Open+Sans&subset=all

子集Typekit字体 (Subsetting Typekit Fonts)

It’s also possible to subset Typekit fonts, albeit in a more limited fashion: currently the feature is in beta, limited to users who opt into Typekit’s Early Access program, with subsetting restricted to language glyphs.

也可以对Typekit字体进行子集化，尽管方式更为有限：当前，该功能处于beta版，仅限于选择使用Typekit的Early Access程序的用户，且子集仅限于语言字形。

Most other font hosting services, such as fonts.com, offer variations of this technique; you should consult their documentation to find out more.

大多数其他字体托管服务，例如fonts.com ，都提供了该技术的变体。 您应该查阅其文档以了解更多信息。

As adding repeated characters into the request string is redundant, I’ve created a quick little JavaScript tool that will display the unique characters from any string or phrase, ordered alphabetically, to help you construct your own requests.

由于在请求字符串中添加重复的字符是多余的，因此我创建了一个快速JavaScript小工具，该工具将显示按字母顺序排列的任何字符串或短语中的唯一字符 ，以帮助您构建自己的请求。

子集自托管的Web字体 (Subsetting Self-Hosted Web Fonts)

You can also subset fonts from your own server by creating a custom font that contains only the glyphs you want.

您还可以通过创建仅包含所需字形的自定义字体来从自己的服务器中对字体进行子集化。

The easiest way to do that currently is by using the Expert option in the Font Squirrel webfont generator service:

当前最简单的方法是使用Font Squirrel webfont generator服务中的Expert选项：

In this case, I’ve decided that I only want to use capital letters from the Lobster font. Extracting these into a webfont yields a much smaller file than the original:

在这种情况下，我决定只使用Lobster字体中的大写字母。 将它们提取到webfont中会产生比原始文件小的文件：

I can assure that uppercase letters will only be typeset in Lobster on my site by stating so in my CSS:

通过在CSS中声明，我可以确保只在网站上的Lobster中对大写字母进行排版：

@font-face { 
	font-family: Lobster;
	src: url("Lobster/lobster-caps.woff");
}
h1 { 
	font-family: Lobster;
	text-transform: uppercase; 
}

结论 (Conclusion)

Subsetting your fonts can be an extremely powerful and useful tool, but needs to be carefully considered and planned for. The demands of designers, content providers and  translators should all be considered when choosing what text range to use in a font subset.

设置字体的字体可能是一种非常强大且有用的工具，但是需要仔细考虑和计划。 选择字体子集中要使用的文本范围时，应考虑设计人员，内容提供者和翻译人员的要求。

翻译自: https://thenewcode.com/878/Slash-Page-Load-Times-With-CSS-Font-Subsetting

网页css引入字体加载慢