加载字体时避免隐藏文本

紫微前端

于 2022-08-01 14:26:22 发布

阅读量195

点赞数

CC 4.0 BY-SA版权

分类专栏：前端知识加深文章标签： servlet html java

本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/126100585

510 篇文章 ¥39.90 ¥99.00

订阅专栏

本文探讨了如何在网页设计中有效地管理字体加载，以防止内容在加载过程中出现短暂的隐藏现象，确保用户体验流畅。通过使用Web字体、CSS技术以及Java Servlet的配合，可以实现字体预加载和优雅降级策略，从而减少文本闪烁问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

加载大字体需要时间。大多数浏览器会隐藏文本，直到字体完全加载。此问题称为不可见文本闪烁(FOIT)。

我们可以通过在自定义字体仍在加载时要求浏览器使用系统字体来防止它发生。加载字体后，它将替换之前使用的系统字体。该短语也称为无样式文本闪现(FOUT)。

为了归档它，我们可以使用以下`font-display`样式：

@font-face {
    font-family: 'Roboto';
    font-display: swap;
}

如果您使用的是Google fonts，那么放置`display=swap`参数是等效的方式：

<link href="https://fonts.googleapis.com/css2?family=Roboto:400,700&display=swap" rel="stylesheet" />