制作可视化大屏时, 字体的引入是一个重要的功能, 不光是可视化项目, 关于设计类的项目都会涉及到大量的第三方字体引用
在字体加载时, chrome会隐藏未加载字体的文本3s, 如果仍未加载,那么将会回退使用系统字体.直到加载后才进行替换, 而safari将会一直隐藏文本, 直到字体文件加载完成,这在大多数网络环境较好时没有问题, 但是当网络延迟时, 会出现 FOIL 也就是闪烁不可见文本
为了解决这个问题,我们要做两件事
- 立即显示回退文本, 没有字体总比空白等待要好
- 批量加载和缓存字体, 项目通常设计十几二十种字体文件,如果缓存到本地,体验是最好的
/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}
font-display 是一个指定字体显示策略的属性
font-display: auto; // 自定义
font-display: block; // 短暂阻塞和无限的交换周期
font-display: swap; // 超小阻塞和无限交换周期
font-display: fallback; // 超小阻塞和短暂交换周期
font-display: optional; // 超小阻塞和没有交换周期
将font-display指定为swap时,会在当前系统没有这个字体的时候立刻使用默认字体替换,并且当字体加载完成时替换
到这里我们就避免了无文本的问题
解决多字体加载问题
我们可以在项目加载时,或者用户无操作时将多字体加载到本地,这时需要用到js加载,这可以精确的控制我们的加载行为
// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the
fontfont.load();
// Wait until the fonts are all
loadeddocument.fonts.ready.then(() => { // Update the CSS to use the fonts});
document.fonts 会保存有当前可用的字体, 你可以使用forEach来查看当前的所有可用字体
这里还有一个4.2k star的开源库做了这个功能, 允许你做更精细的控制 fontfaceobserver
我的推荐是, 将项目的字体分成几类, 本地字体不加载, 第三方字体可以存在数据库中, 前端项目只需要写一个字体加载器, 比对本地字体和全量字体, 进行加载.
当前可视化面板已经使用的字体可以单独存储到当前dashboard信息中, 来实现对外发布仅加载已使用字体
about me
我是meanc, 欢迎关注
