font-display 字体渲染属性

[liqinuo]

浏览器是如何还在自定义字体的

在自定义字体被渲染出来之前，需要先进行加载，大多数浏览器在字体还未还在出来之前会先隐藏字体，导致网络差的情况下会有一段时间的空白

font-display 使用

• auto: 默认值，浏览器默认行为
• swap: 优先显示默认字体或者后备字体，直到自定义字体加载完成后再使用自定义渲染文本
• fallback: auto 与 swap 的折中方案，较短时间内先 auto，如果还未加载完成，再 swap
• optional: 与 fallback 类似，但会让浏览器决定是否加载，如果浏览器连接速度慢，字体不会被使用

@font-face {
    font-family: 'sentyGoldenBell';
    src: url('sentyGoldenBell.otf');
    font-display: swap;
}
p {
    font-family: 'sentyGoldenBell';
}

效果

兼容性

脚本处理

除了样式上可以处理，也推荐一个比较成熟的脚本处理方案：Font Face Observer 脚本库