前言

前几天写了canvas动态加载字体这篇文章之后有人问我网站什么字体,我就给css发了过去,于是今天想写一篇关于网页使用第三方字体的优化。

优化

正常都是使用

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

这种方式去使用第三方字体,但是有一个问题,字体没有加载之前网页是空白的

font-display

font-display 属性决定了一个@font-face 在不同的下载时间和可用时间下是如何展示的。
字体显示时间线基于一个计时器,该计时器在用户代理尝试使用给定下载字体的那一刻开始。时间线分为三个时间段,在这三个时间段中指定使用字体的元素的渲染行为。


字体阻塞周期
如果未加载字体,任何试图使用它的元素都必须渲染不可见的后备字体。如果在此期间字体已成功加载,则正常使用它。
字体交换周期
如果未加载字体,任何尝试使用它的元素都必须呈现后备字体。如果在此期间字体已成功加载,则正常使用它。
字体失败周期
如果未加载字体,用户代理将其视为导致正常字体回退的失败加载。

参数

  • auto:使用浏览器默认的行为;
  • block:浏览器首先使用隐形文字替代页面上的文字,并等待字体加载完成再显示;
  • swap:如果设定的字体还未可用,浏览器将首先使用备用字体显示,当设定的字体加载完成后替换备用字体;
  • fallback:与 swap 属性值行为上大致相同,但浏览器会给设定的字体设定加载的时间限制,一旦加载所需的时长大于这个限制,设定的字体将不会替换备用字体进行显示。Webkit 和 Firefox 中设定此时间为 3s;
  • optional:使用此属性值时,如果设定的字体没有在限制时间内加载完成,当前页面将会一直使用备用字体,并且设定字体继续在后台进行加载,以便下一次浏览时可以直接使用设定的字体。

例子

@font-face {
  font-family:ExampleFont;
  src:url(/path/to/fonts/examplefont.woff)format('woff'),
       url(/path/to/fonts/examplefont.eot)format('eot');
  font-display: swap;
}

资料

font-display :https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display

JS加载

当然了也可以使用JS加载字体,之前的文章里面提到了document.fontsAPI,字体加载完以后在通过添加CSS也是可以同样的效果

资料

fonts:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fonts

实现代码

//判断浏览器是否支持
if (document.fonts) {
    const font = new FontFace('fontFamilyName', 'url(${url})');
    document.fonts.add(font);
    font.load();
    font.loaded.then(() => {
        document.body.style.fontFamily = 'fontFamilyName';
    }).catch(err => {
        console.log(err);
    });
} else {
    console.error('抱歉,不支持的浏览器');
}
最后修改:2021 年 03 月 15 日 12 : 08 PM
如果觉得我的文章对你有用,请随意赞赏