制作可视化大屏时，字体的引入是一个重要的功能，不光是可视化项目，关于设计类的项目都会涉及到大量的第三方字体引用
在字体加载时，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 来查看当前的所有可用字体
![[Pasted image 20240216110208.png]]
这里还有一个 4.2k star 的开源库做了这个功能，允许你做更精细的控制
fontfaceobserver
我的推荐是，将项目的字体分成几类，本地字体不加载，第三方字体可以存在数据库中，前端项目只需要写一个字体加载器，比对本地字体和全量字体，进行加载.
当前可视化面板已经使用的字体可以单独存储到当前 dashboard 信息中，来实现对外发布仅加载已使用字体