字体设置方案：从 font-family 到 font-display

[liukexina]

font-display 是用来控制某一字体在尚未成功加载时采用何种方式显示文本。 如果不明确指定 font-display，浏览器一般会采用「block」的方式进行显示，即，在该字体完全加载成功之前啥都不显示。

在@font-face指令中使用font-display来加载自定义字体。这个属性可以添加以下的值：

1. auto:默认值
   典型的浏览器字体加载的行为会发生，也就是使用自定义字体的文本会先被隐藏，直到字体加载结束才会显示。

2. swap：后备文本立即显示直到自定义字体加载完成后再使用自定义字体渲染文本。
   在大多数情况下，这就是我们所追求的效果。之前提及到的JavaScript脚本实现的功能就基本和这个是一致的。

3. fallback:这个可以说是auto和swap的一种折中方式。
   需要使用自定义字体渲染的文本会在较短的时间（100ms according to Google ）不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。一旦自定义字体加载结束，那么文本就会被正确赋予样式。

4. optional:效果和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: swap; 
}

p {
    font-family: "Open Sans Regular", "sans-serif"
}