避免在字体加载过程中显示不可见文本 - 技术交流 - 苹果cms盒子

发表于 2024-7-28 11:32:24

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

方法 1：使用 font-display

font-display 是一个用于指定字体显示策略的 API。swap 用于告知浏览器使用此字体的文本应立即以系统字体显示。自定义字体准备就绪后，系统就会交换系统字体。

/* Before */
@font-face {
font-family: Helvetica;
}
/* After */
@font-face {
font-family: Helvetica;
font-display: swap;
}

复制代码

方法 2：等到自定义字体加载完毕后再使用自定义字体

再多做一点工作，可以考虑采用自定义程度更高的方法。

此方法分为三个部分：

不要通过重构 CSS 在初始网页加载时使用自定义字体，以免在一开始使用自定义字体。这可确保浏览器立即使用系统字体显示文本。
使用 CSS Font Loading API 检测自定义字体的加载时间
更新页面样式以使用自定义字体。

// Define a FontFace
const font = new FontFace("myfont", "url(myfont.woff)");
// Add to the document.fonts (FontFaceSet)
document.fonts.add(font);
// Load the font
font.load();
// Wait until the fonts are all loaded
document.fonts.ready.then(() => {
// Update the CSS to use the fonts
});

复制代码

这也可以借助 FontFaceObserver 库来实现，有些人发现此 API 更易于使用。

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

优质推荐

我是图图

短视主题静态文件存储教程

使用超级播放器有问

苹果cmsv10点击视频重名就卡死，如何处理

有没有用mxone pro这个主题的,首页不显示分

苹果CMS v10详细安装教程+官方原版源码分享

热门内容

荣誉管理