在网页中使用自定义的字体一般通过下面的代码
@font-face {
font-family: 'myfont';
src: url('font/MahjongTile/MahjongTile.eot');
/* IE9 Compat Modes */
src: url('font/MahjongTile/MahjongTile.eot?#iefix') format('embedded-opentype'),
/* IE6-IE8 */
url('font/MahjongTile/MahjongTile.woff2') format('woff2'),
/* Super Modern Browsers */
url('font/MahjongTile/MahjongTile.woff') format('woff'),
/* Pretty Modern Browsers */
url('font/MahjongTile/MahjongTile.ttf') format('truetype'),
/* Safari, Android, iOS */
url('font/MahjongTile/MahjongTile.svg#svgFontName') format('svg');
/* Legacy iOS */
}
在实际环境中我们经常会遇到一个现象。当页面的DOM加载完成后,由于字体文件尚未加载完毕。这时使用自定义字体的文字浏览器会使用缺省的字体显示出来,当字体文件加载完成后会自动刷新字体。这会使得页面上的字体有明显的跳动变化。
为了避免这种效果,我们希望判断如果字体文件加载完成才绘制响应的DOM,否则页面不显示内容或绘制一个加载状态。那么关键是代码如何知道字体已经加载完毕了呢?
方法一、 FontFaceSet
“CSS Font Loading Module Level 3”规范中定义了一组接口用来管理字体。
直接上代码吧:
fontWatcher=new Promise((resolve)=>{
document.fonts.onloadingdone=(event) => {
event.target.forEach((font) => {
if (font.family === 'myfont' && font.status === 'loaded') {
resolve(font);
}
});
};
});
fontWatcher.then((font)=>{
console.log(`${font.family}字体加载完毕`);
});
字体宽度比较
对于尚不支持此规范的浏览器,我们的思路是,给同样的文字分别赋予缺省字体和自定义字体。如果宽度一致我们认为自定义字体尚未加载完成,如果不一致则认为加载完成了。这一思路是学习了Google的“webfontloader”总结出来的。
const fn_fontWatch=(fontFamily)=>{
const fn_gen_span_with_font=(font)=>{
const span=document.createElement('span');
span.style.cssText=`display:block;position:absolute;top:-9999px;left:-9999px;
font-size:300px;width:auto;height:auto;line-height:normal;margin:0;
padding:0;font-variant:normal;white-space:nowrap;font-family:${font}`;
span.innerHTML='BESbswy';
document.body.append(span);
return span;
};
const font_serif=['serif','sans_serif']
const default_width=[];
const font_span=[];
font_serif.forEach((font)=>{
const span_default=fn_gen_span_with_font(font);
default_width.push(span_default.offsetWidth);
document.body.removeChild(span_default);
const span_font=fn_gen_span_with_font(`${fontFamily},${font}`);
font_span.push(span_font);
});
return new Promise((resolve)=>{
const fn_check=()=>{
let ret=false;
for(let i=0;i<font_serif.length;i++){
ret=ret || default_width[i]!==font_span[i].offsetWidth;
};
return ret;
};
const fn_check_loop=()=>{
if(fn_check()){
font_span.forEach((span)=>{
document.body.removeChild(span);
});
resolve(fontFamily);
}else{
window.setTimeout(fn_check_loop,10);
}
};
fn_check_loop();
});
};
fontWatcher=fn_fontWatch('myfont');
fontWatcher.then((font)=>{
console.log(`${font.family}字体加载完毕`);
});