前言
今天在修改本站字体样式时,遇到了问题,于是找了一些资料,最终解决!
更改字体
正常修改网站字体样式都是使用
@font-face{
font-family:myfont;
src:url(font.woff);
}
*{
font-family:myfont;
}
但是使用这种方法有个问题:字体没有加载之前网页是空白的,或者说文字不显示
不知道你们有没有遇到过以上的问题,那么该怎么办呢,接下来为大家解决
优化
属性值
font-display:auto / block / swap / fallback / optional;
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('抱歉,不支持的浏览器');
}
总结
该优化方法的原理是:当指定的字体无法加载出来时,将使用设定的规则与备用字体进行替换,从而完成字体加载。