每日整理真实提问 356 个问题 · 726 个回答 需要系统性的技术文档?看 Shopify 技术百科 1000 篇 → 400-873-8117
已解决 提问于 3 个月前

自定义字体导致文字闪烁

2 个回答 2,435 次浏览 性能与 Core Web Vitals 最后活跃 3 个月前
11

品牌字体加载慢,出现「先显示系统字体再切换」的闪烁,有时正文空白一秒。

陈
陈工提问者
Shopify 认证开发者 · 专注主题与 Liquid
3 个月前提问 · 已收到 2 个回答

2 个回答

已采纳 · 提问者确认解决
31

先把判断放在前面:字体文件加载与解析需要时间,font-display 设置不当会导致 FOIT 或 FOUT。

1处理顺序

  1. 用 font-display: swap,先显示备用字体。
  2. 字体子集化,中文字体只保留常用字,体积能降 90%。
  3. 用 preload 预加载首屏字体,但只对 1–2 个字体文件做。
  4. 用 size-adjust 匹配字体度量,减少切换时的位移。
  5. 考虑用系统字体栈替代,最快且无闪烁。
验收:文字无长时间空白,切换时无明显跳动。
风 风格技术团队 回答于 3 个月前
9

中文字体动辄几 MB,是最容易被忽视的性能杀手。如果没有强品牌需求,系统字体栈是更聪明的选择。

泽 阿泽 · 前端工程师 · 3 个月前

你的处理方式是什么?

写下你实际验证过的步骤,比「我也有这个问题」有用得多。当前版本为静态展示,提交后会由团队整理并回复。

描述你遇到的现象、店铺环境(主题 / 套餐 / 应用)、已经试过哪些操作……
我要单独提问 工作日 10 分钟内回复,可直接加微信 fenggejishu