CSS @font-face性能优化(笔记)

一、 font-face基本用法

@font-face {
	font-family: Lato;
	src: url('font-lato/lato-regular-webfont.woff2') format('woff2'),
		 url('font-lato/lato-regular-webfont.woff') format('woff'),
		 url(font-lato/lato-regular-webfont.ttf) format("opentype");
}
p { font-family: Lato, serif; }

二、 什么时候会下载字体？

很遗憾，字体并不会下载。 通常情况下，只有当我们的页面元素用到了font-face中定义的字体的情况下，才会下载对应的字体。

<div id="test">这里是有文本的哦</div>
#test {
	font-family: Lato;
}

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

那你可能会问了，如果我们的DOM元素是通过动态插入的呢？比如：

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
document.body.appendChild(el);
el.innerHTML = 'Content.';

var el = document.createElement('div');
el.style.fontFamily = 'open_sansregular';
/* 到这里，IE8就会开始下载字体 */

document.body.appendChild(el);
/* 只有到这里，Firefox, IE 9+ 才会开始下载字体 */

el.innerHTML = 'Content.';
/* 只有到这里，Chrome, Safari 才会开始下载字体 */

三、 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行为，我们需要在设置@font-face的时候给它加一个属性：font-display。
font-display默认是auto, 可选属性与含义如下：

auto. The font display policy is user-agent-defined.
block. Gives the font face a short block period (3s is recommended in most cases) and an infinite swap period.
swap. Gives the font face an extremely small block period (100ms or less is recommended in most cases) and an infinite swap period.
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).
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即可。

五、 preload

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
通常和最基本的字体用法配合使用

六、 字体转 BASE64URI

优点： 这种做法的优点是不会产生FOIT和FOUT。所以也不会有reflow和repaint.
缺点： 字体转成base64也会很大，会影响页面首次加载速度。不支持逗号分隔的形式加载多种格式的字体，只能加载一种格式字体。这导致你为了尽可能保证所有浏览器都可以兼容，通常会指定为woff格式，因为woff格式兼容性好，但是却没法使用更小体积的woff2格式，因为woff2格式兼容性差点。

七、异步加载BASE64格式URI字体

这种方法就是通过异步的方式插入带有BASE64格式URI字体的CSS链接。

八、使用Font Load API + FOUT + class切换

这种方式是期初并不使用用到@font-face的class，然后用Font Load API加载我们想用的字体，然后切换相应的CSS即可。Font Load API是原生的API：

document.fonts.load('1em open_sansregular')
.then(function() {
	var docEl = document.documentElement;
	docEl.className += ' open-sans-loaded';
});

.open-sans-loaded h1 {
	font-family: open_sansregular;
}

九、 FOFT(Flash of Faux Text)

FOFT会把字体的加载分成多个部分，首先加载罗马网络字体，然后会在加载真实的粗体和斜体的时候立即使用font-synthesis属性渲染粗体和斜体的变体。
这种方法是基于[使用Font Load API + FOUT + class切换]这种方式的，非常适合加载同一种字体但是不同粗细，字形的场景，比如罗马、粗体、斜体、粗斜体等。我们将这些字体分成2阶段： 第一阶段是罗马字体，然后立即渲染人造粗体和斜体，最后(第二阶段)用真实字体替代。这里面还可以使用sessionStorage优化访问重复视图的场景。

十、CRITICAL FOFT

CRITICAL FOFT和标准的FOFI的唯一区别就在于第一阶段罗马字体的加载，CRITICAL FOFT不会加载罗马字体的全集，只会加载它的一个子集（比如A-Za-z0-9），全集会在第二阶段加载。

十一、CRITICAL FOFT WITH DATA URI

这个和CRITICAL FOFT的唯一区别就是罗马子集字体的加载方式，前面是用Font Load API完成了，这里会将马子集字体硬编码成BASE64 URI的形式加载。

十二、 CRITICAL FOFT WITH PRELOAD

十二、 CRITICAL FOFT WITH PRELOAD