网页中第三方字体加载优化方案

小左
2021-11-05 / 0 评论 / 2 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年11月06日,已超过394天没有更新,若内容或图片失效,请留言反馈。

Font

前言

前几天给自己博客换了第三方字体,所欲今天想写一篇关于网页使用第三方字体的优化。

优化

相信大部分都是这样使用的:

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

div {
  font-family: myFirstFont;
}...

但是呢这种方式去加载使用第三方字体,会存在一个BUG,就是当字体没有加载之前网页是空白的哦。

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('抱歉,不支持的浏览器');
}...
0

评论 (0)

取消