font-display属性支持情况及正确使用方式咨询

1. 第三方网站的建议是否有误？ #

第三方网站的建议本身没有错误，但表述可能存在歧义——它所指的使用font-display: optional，是要求在@font-face规则中配置该描述符，而非直接在HTML元素（比如body）的CSS规则里使用。你在body中设置该属性时Chrome不识别，是因为font-display根本就不是可应用于元素的CSS属性，它是@font-face规则的专属描述符，MDN的文档说明完全正确。

2. font-display: optional的具体作用机制 #

font-display: optional是专门用于控制自定义字体加载行为的策略，核心逻辑是彻底消除字体切换带来的页面闪烁：

• 浏览器会为自定义字体分配一个极短的「阻塞期」（通常约100ms，不同浏览器略有差异）；
• 若自定义字体在阻塞期内加载完成，浏览器会立即使用该字体渲染文本；
• 若阻塞期结束时字体仍未加载完成，浏览器会直接使用font-family中定义的回退字体，并且后续即使自定义字体加载完成，也不会再替换回退字体。

这种策略适合追求页面加载速度、对字体一致性要求不苛刻的场景，能保证页面文本始终快速可见且无闪烁。

3. 示例场景下的字体加载逻辑 #

针对你给出的代码示例：

body {
  font-family: 'My font', Verdana, Tahoma, sans-serif;
}

@font-face {
  font-family: 'My font';
  /* 其他字体属性 */
  font-display: optional;
}

浏览器不会优先加载Verdana，而是遵循以下逻辑：

1. 首先尝试加载'My font'；
2. 同时启动font-display: optional的阻塞计时；
3. 若'My font'在阻塞期内加载完成，页面文本使用'My font'渲染；
4. 若阻塞期结束时'My font'仍未加载，直接切换为Verdana（后续不会再替换为'My font'）。

4. 为什么body中设置font-display: optional无效？ #

font-display是@font-face规则的专属描述符，它的作用是定义自定义字体本身的加载显示策略，而非控制元素的字体渲染行为。因此在body等元素的CSS规则中声明font-display: optional属于无效CSS声明，浏览器会直接忽略该设置。

内容的提问来源于stack exchange，提问作者vegmaster