font-display 用法

font-display

在项目中我们有时候会使用自定义字体,如果在网络较差的环境中加载自定义字体,通常会碰到字体下载完成前文本不显示,也就是 FOIT(Flash Of Invisible Text) 现象。

导致这种现象的原因是,为了降低字体下载速度过慢产生的影响,大多数浏览器都会提供一个缓冲时间来下载字体,如果这个时间段内,字体下载完成,则采用新字体渲染,反之则采用备用字体渲染文本。这个缓冲时间,各个浏览器各有不同。

mark

为了让用户有更好的体验,Chrom 提出 通过 @font-display 属性来控制文本在需要下载的字体加载完成之前的呈现方式在,并在 Chrome 49 中进行了实验,最终在 Chrome 60 正式开放支持。

语法

font-display 支持下面 5 个取值:

  • auto

    默认值,浏览器使用默认方式加载字体,也就是浏览器会隐藏需要使用正在加载的字体的文本,但字体加载完成时,才显示对应的文本。在大多数浏览器中,auto 的效果和 block 类似。

  • block

    浏览器隐藏的文本(用占位符绘制文本),然后在字体加载完后立即使用自定义字体显示文本。

    mark

  • swap

    先使用备用字体渲染文本,等字体加载完后再用自定义字体重新渲染,这种渲染方式也叫 FOUT(Flash Of Unstyled Text)

    mark

  • fallback

    fallback 的效果是 auto 和 swap 效果的综合,浏览器会隐藏文本一段时间(大约是 100ms 或更少),如果这段时间内,字体未加载完成则采用备用字体渲染文本,等字体加载完后再用自定义字体重新渲染。

  • optional

    optional 的效果与 fallback 类似,不过前者会让浏览器决定是否需要下载使用自定义字体,如果用户处于弱网络环境下,浏览器可能不会下载自定义字体。

1
2
3
4
5
6
@font-face {
font-family: 'font-family',
src: url('https://fonts.gstatic.com/s/baloobhai/v1/xxxx.woff2') format('woff2')
url('https://fonts.gstatic.com/s/baloobhai/v1/xxxx.woff') format('woff');
font-display: swap;
}

兼容性

IE 系列和 Sarfai 10 不支持,Chrome、Firefox、Opera 支持。对于不支持的浏览器,可以考虑采用使用 Font Face Observer

补充:Safari 11.1 开始支持

参考