网站更改字体样式及优化

首页 / ?网站教程 / 正文

前言

今天在修改本站字体样式时,遇到了问题,于是找了一些资料,最终解决!

更改字体

正常修改网站字体样式都是使用

@font-face{
  font-family:myfont;
  src:url(font.woff);
}
*{
  font-family:myfont;
}

但是使用这种方法有个问题:字体没有加载之前网页是空白的,或者说文字不显示
不知道你们有没有遇到过以上的问题,那么该怎么办呢,接下来为大家解决

优化


属性值
font-display:auto / block / swap / fallback / optional;
auto:字体显示策略由用户代理定义。
block:为字体提供一个短暂的阻塞周期和无限的交换周期。
swap:为字体提供一个非常小的阻塞周期和无限的交换周期。
fallback:为字体提供一个非常小的阻塞周期和短暂的交换周期。
optional:为字体提供一个非常小的阻塞周期,并且没有交换周期。

CSS版:

@font-face{
  font-family:myfont;
  src:url(font.woff)format('woff'),
      url(font1.woff)format('woff');
  font-display:swap;
}
*{
  font-family:myfont;
}

JS版:JS仅加载字体,还需要配合CSS使用

if (document.fonts) {
    const font = new FontFace('myfont', 'url(font.woff)');
    document.fonts.add(font);
    font.load();
    font.loaded.then(() => {
        document.body.style.fontFamily = 'myfont';
    }).catch(err => {
        console.log(err);
    });
} else {
    console.error('抱歉,不支持的浏览器');
}

总结

该优化方法的原理是:当指定的字体无法加载出来时,将使用设定的规则与备用字体进行替换,从而完成字体加载。

评论区
头像