优化Web字体的加载浏览器下载字体的策略 IE8 只要定义了font-face，就会去下载字体，不论实际有没有应用该字体

搜索引擎优化（SEO）对于所有希望提升其在线能见度的网站来说都至关重要。同样，网站性能和用户体验是影响SEO的关键因素之一。而网站加载速度的重要组成部分就是字体加载。

浏览器下载字体的策略

IE8 只要定义了font-face，就会去下载字体，不论实际有没有应用该字体。
Firefox, IE 9+ 只有定义了font-face 并且页面有元素应用了该字体，就会去下载，不论该元素是否有文本内容。
Chrome, Safari 只有定义了font-face 并且页面有元素应用了该字体，并且该元素有文本内容，才会去下载字体。

// 动态设置dom，字体加载时机

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
/* 到这里，IE8就会开始下载字体 */
document.body.appendChild(el);
/* 只有到这里，Firefox, IE 9+ 才会开始下载字体 */
el.innerHTML = 'Content.';
/* 只有到这里，Chrome, Safari 才会开始下载字体 */

选择合适的字体格式

Web字体格式的选择对性能有显著影响。常见的字体格式包括TrueType Font（TTF）、OpenType Font（OTF）、Web Open Font Format（WOFF），以及WOFF 2.0。WOFF 2.0以其较小的文件大小和较快的加载速度被认为是Web优选格式。

减少字体文件大小

文件大小是导致字体加载延迟的主要原因。优化文件大小不仅能提升加载速度，还能减少带宽使用，对用户和服务器都有好处。

压缩字体文件

字体文件的压缩可以通过多种工具实现，如FontSquirrel的Webfont Generator和Google的Webfonts Helper等。这些工具能够显著减少文件大小，同时保证字体的质量。

在线字体压缩工具：www.youcompress.com/zh-cn/ttf/

使用字体子集

不是每个Web页面都需要字体文件中的所有字形。通过只选择和使用必需的字形（比如网站文本中实际使用的字母和符号），可以显著降低字体文件的大小。

FontSubsetGUI使用教程

FontSubsetGUI可以剪切字体库，方便减少字体文件的大小。FontSubsetGUI是一个开源工具，可以在GitHub上找到。先下载字体库，后缀ttf格式，如果是otf格式，需要先转ttf。

点击browser按钮选择Source Font源字体库
点击browser按钮选择Char List保留字符文件的路径，
点击browser按钮选择New Font生成的精简字体库的目录(也可以手动输入或者复制粘贴文件路径）
点击Proceed开始瘦身，会看到completed弹窗表示大功告成！里面有显示保留字符占原有字体的百分比，到生成目录下能看到新生成的字体库比原来完整的包小很多，一般可以精简到3M左右。

字体子集应用

@font-face {
  font-family: "zpix";
  src: url("./newfont.ttf");
}
* {
    font-family: "zpix", "Microsoft YaHei", sans-serif;;
    font-size: 14px;
}

使用字体加载技术

借助现代CSS和JavaScript技术，可以优化字体的加载过程，避免渲染阻塞，提高网站性能。

使用Font Loading API

Font Loading API是一种原生的JavaScript API，允许开发者控制字体的加载过程。通过这种方式，可以实现非阻塞加载，并在字体加载完毕后应用到页面中，从而优化渲染性能。

	// 定义字体
	const font = new FontFace("zpix", "url(./newfont.ttf)");
	// 把字体添加到 document.font（FontFaceSet）中
	document.fonts.add(font);
	// 加载字体
	font.load();
	// 等待到所有的字体都加载完毕
	document.fonts.ready.then(() => {
		console.log("字体加载完毕");
	});

实施 FOUT 和 FOIT 策略

Flash of Unstyled Text（FOUT）和Flash of Invisible Text（FOIT）是两种常见的字体加载策略。FOUT允许文本首先使用备用字体渲染，然后在Web字体加载完成后进行切换。而FOIT则在字体加载之前隐藏文本，加载完毕后再显示。这两种策略在不同场景下各有优势。

FOIT(Flash of Invisible Text)

FOIT是浏览器在加载字体的时候的默认表现形式，也就是在字体加载过程中，页面是看不到文本内容的。在现代浏览器中，FOIT会导致这种现象出现至多3秒。FOIT会导致很差的用户体验，这是我们需要尽量去避免的。

FOUT(Flash of Unstyled Text) 与 font-display属性

FOUT意思是在字体加载过程中使用默认的系统字体，字体加载完后显示加载的字体，如果超过了FOIT(3s)字体还没加载，则继续使用默认的系统字体。 IE浏览器和Edge不会等待FOIT超时才显示默认字体，会立即显示默认字体。FOUT比FOIT好，但是需要注意它引起的reflow(重绘)。

设置字体FOUT策略

使浏览器有FOUT行为，设置@font-face的时候给它加一个属性：font-display。 font-display默认是auto, 可选属性与含义如下：

// 1、auto. The font display policy is user-agent-defined.
// 2、block. Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
// 3、swap. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period.
// 4、fallback. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a short swap period (3s is recommended in most cases).
// 5、optional. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and a 0s swap period.

// 一般设置成fallback和optional即可。

@font-face {
　　font-family: "Open Sans Regular";
　　font-weight: 400;
　　font-style: normal;
　　src: url("fonts/OpenSans-Regular-BasicLatin.woff2") format("woff2");
　　font-display: optional;
}

preload（预加载）

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>