自定义字体加载期间文字消失,加 font-display

字体没加载完,浏览器默认不给字,文本会空白。

加 font-display 让兜底字体先顶上。

写 swap 最省事,先显示再换,会有跳动。

怕跳动用 optional,弱网就直接不换。

fallback 只等极短时间,超时先用兜底。

/* @font-face 里加一行控制加载期表现 */
@font-face {
  font-family: "BrandSans";
  src: url("/fonts/brand.woff2") format("woff2");
  font-display: swap;   /* auto | block | swap | fallback | optional */
}

/* 兜底字体按系统栈写全,别只留一个 */
body {
  font-family: "BrandSans", -apple-system, "Segoe UI",
               "Microsoft YaHei", sans-serif;
}
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容