FED实验室 - 专注WEB端开发和用户体验

煦涵说CSS:font-display

煦涵说 煦涵 301℃ 0评论

当我们在前端开发中使用自定义字体时,会遇到字体加载慢影响用户体验的情况,今天本篇文章来介绍 font-display 属性,该属性定义了浏览器加载和显示自定义字体文件的方式。开始介绍 font-display 属性前,我们来看看浏览器渲染字体有哪些差异:

Browser Timeout Fallback Swap
Chrome 35+ 3 seconds yes yes
Opera 3 seconds yes yes
Firefox 3 seconds yes yes
IE 0 seconds yes yes
Safari No timeout N/A N/A

Chrome、Opera、Firefox 浏览器超时时间为 3 秒,超时后将使用后备字体渲染。如果字体下载成功,将替换后备字体,重新渲染文本。在 IE 浏览器会立即渲染文本,如果字体未下载完成,使用后备字体立即渲染,如果字体下载成功,使用后备字体重新渲染。Safari浏览器没有超时行为,不知道后备字体和字体替换。

煦涵说CSS:font-display

基本使用

@font-face {
    font-family: 'YourWebFont',
    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;
}

为什么用 font-display

  • 决定是否使用后备字体显示字体或者字体下载过程中将其隐藏
  • 控制字体加载后你想要做什么,即继续显示后备字体或者用自定义字体替换。当然,你也可以在每个元素上进行设置
  • 可以为每一个字体指定下载超时值,甚至可以应用到某个指定元素
  • 有效的提升用户体验,以免文字加载太慢影响用户使用和操作。

font-display 可取值

  • auto: 默认值,指定浏览器使用默认方式加载字体,现在大多数浏览器使用默认策略和 block 相似。
  • block: 指定浏览器要隐藏的文本,直到字体完全下载完成。 更准确地说,浏览器用无形占位符绘制文本,然后在字体加载完后立即与自定义字体交换。 这也被称为 “Flash of Invisible Text” 或者 “FOIT”。
  • swap: 指定浏览器使用后备字体渲染文本,直到字体文件下载完成。这也被称为 “flash of unstyled text” 或者 “FOUT”
  • fallback: 该状态是 auto 和 swap 的一个中间状态,浏览器隐藏文本大约 100ms, 如果字体没有下载完成,则使用后备文本字体渲染,知道自定义字体下载完成。
  • optinal: 与 fallback 类似,如果字体能够为页面效果增色不少,但并非特别重要时,使用 optional 正好。使用 optional 时,将由浏览器来决定是否开始下载字体。可以不下载,也可以给予字体较低的优先级,一切取决于浏览器是否认为对用户最有利。当用户处于弱网络下,这是非常有用的,下载字体可能并不是对资源最好的利用。

浏览器支持

Chrome 60+, Opera 47+ 已经支持 font-display 属性

不支持 font-display 使用 Font Loading API

W3C Font Loading API Draft

var html = document.documentElement;
if("fontDisplay" in document.body.style === false) {
    if('fonts' in document) {
        document.fonts.load('1em Open Sans Regular');
        document.fonts.ready.then(function(fontFaceSet) {
            html.className += ' fonts-loaded';
        }).catch(function() {
            html.className += ' fonts-failed';
        });
    }
}

相关资源:
https://www.sitepoint.com/css-font-display-future-font-rendering-web/
——update at 2017.10.01

感谢您的阅读

EOF

作者[煦涵]

2017年08月13日

下面是「FED实验室」的微信公众号二维码,欢迎扫描关注:

FED实验室

行文不易,如有帮助,欢迎打赏!

赞赏支持 喜欢 (0)
捐赠共勉
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址