继上篇文章网页字体文件最后再加载实现方法，后写的一篇优化加载字体在网页中的显示体验。
上一篇文章的第一种方法，我在使用后，发现网页主体中的文字显示会延迟一段时间再加载，于是为了改进，又上网搜索相关内容，得出了本篇文章，优化方案。
现在说说第三种方式，也是最近在使用的一种方式，我个人比较偏向第三种，使用webfontloader.js实现。webfontloader.js下载地址：webfontloader/webfontloader.js at master · typekit/webfontloader (github.com)
当前方式是结合第一种方式，等所有字体加载完成再使用字体，否则就先使用默认字体，这样就可以在不影响用户阅读的情况下也可以加载字体，用户体验相对较好。
使用方式：
代码语言：javascript复制WebFont.load({
google: {
families: ['Roboto:300,400,500,700', 'Open Sans']
},
custom: {
families: ['My Font'],
urls: ['path/to/myfont.css']
},
active: function() {
// 字体加载成功后执行的回调函数
},
inactive: function() {
// 字体加载失败后执行的回调函数
}
});一个项目中的使用示例：
将样式创建好，然后使用webfontloader进行监听加载，要是加载完成，再将样式添加进去。
当然也可以将三种字体分开，这样就不捆绑在一起了。
代码语言：javascript复制 //最后加载字体，防止网页加载速度
// 创建一个新的<style>标签
var style = document.createElement('style');
// 将字体文件链接放在<style>标签中
style.textContent = `
<?php if(!empty(_g('title_font'))){?>
@font-face {
font-family: 'indexTitleFont';
src: url('<?php echo _g('title_font'); ?>') format('woff');
}
<?php }?>
<?php if(!empty(_g('article_font'))){?>
@font-face {
font-family: 'article_font';
src: url('<?php echo _g('article_font'); ?>') format('woff');
}
<?php }?>
<?php if(!empty(_g('saying_font'))){?>
@font-face {
font-family: 'saying_font';
src: url('<?php echo _g('saying_font'); ?>') format('woff');
}
<?php }?>
`;
WebFont.load({
custom: {
families: ['indexTitleFont', 'article_font','saying_font']
},
active: function() {
// 字体加载完成后执行的操作
document.head.appendChild(style);
},
inactive: function() {
// 字体加载失败时执行的操作
document.head.appendChild(style);
}
});
