字体加载太慢怎么优化？本地字体文件反而更卡了？
我用的是自定义中文字体，直接从 Google Fonts 引入特别慢，就改成把 woff2 文件下载到本地用 @font-face 引入，结果页面首次打开时文字还是空白好几秒，甚至比在线加载还卡，这是为啥？
我的写法大概是这样的：
@font-face {
font-family: 'MyFont';
src: url('./fonts/myfont.woff2') format('woff2');
font-display: swap;
}- 2
回答
43浏览
字体加载太慢怎么优化？
我在项目里用了一个自定义的中文字体，但页面首次加载时明显卡顿，文字会先显示默认字体再闪成自定义字体，用户体验很差。我试过用 font-display: swap，但好像没完全解决问题。 现在想用 Ja...
- 2
回答
97浏览
Next.js项目中自定义字体加载慢且页面闪烁怎么办？
我在Next.js项目里引入了本地字体文件，但页面加载时字体总是延迟渲染，出现文字闪烁的情况。之前用标签在头部引入过Google字体倒没问题，换成本地字体后就卡住了。 尝试过把字体文件放在public...
- 2
回答
39浏览
Chromely加载本地HTML时路径怎么写才对？
我在用Chromely做桌面应用，想加载本地的index.html文件，但总是白屏或者报404。文档里说要用相对路径，但我试了好几种写法都不行，到底该怎么配置路径啊？ 我的项目结构是根目录下有个www...
- 1
回答
52浏览
WOFF2 字体加载失败怎么办？
我在项目里用了 WOFF2 格式的自定义字体，本地开发没问题，但部署到线上后部分浏览器根本不加载，控制台报 404。我确认文件路径是对的，而且服务器也配置了 MIME 类型。 是不是还要加什么特殊的响...
- 2
回答
92浏览
CEF加载本地HTML时白屏怎么办？
我用CEFSharp做桌面应用，加载本地HTML文件一直显示白屏，控制台也没报错。路径是file:///C:/app/index.html，文件确实存在。 试过改成http://本地服务就能正常显示，...
- 2
回答
47浏览
CEF加载本地HTML时样式错乱怎么办？
我用CEF做桌面应用，加载本地HTML文件时发现CSS样式完全没生效，控制台也没报错。明明在浏览器里打开是正常的，放到CEF里就排版全乱了。是不是路径问题？但我试了绝对路径和相对路径都不行。 这是我的...
- 1
回答
100浏览
字体预加载后反而首屏变慢了，怎么回事？
我给网站加了字体预加载，用的是 <link rel="preload" as="font">，但发现首屏加载时间反而变长了，本地测试特别明显。 本来以为预加载能提升性能，结果 Lighth...
- 2
回答
54浏览
Vite 打包后首屏加载太慢，怎么优化？
我用 Vite + Vue3 开发了一个项目，本地开发时很快，但 build 之后首屏加载特别慢，Lighthouse 评分很低。我已经试过开启 brotli 压缩和分包，但效果不明显。 是不是我的组...
- 1
回答
46浏览
自定义字体加载时文字闪烁怎么解决？
我在项目里用@font-face引入woff2字体文件，但页面加载时总会出现文字闪烁。试过设置font-display: swap和预加载，但效果不明显，有没有更好的优化方法？ @font-face ...
- 2
回答
89浏览
async和defer到底该怎么用才能优化首屏加载？
最近在优化页面加载速度，把两个JS文件分别用了async和defer，但页面还是感觉卡顿。比如这个代码： <script src="main.js" defer></script&g...
woff2 压缩过确实比 ttf 小很多，但中文字体文件本身太大了——随便一个完整的中文字体都是 2-5MB，浏览器得先把这个大家伙下载完才能显示。font-display: swap 只是让文字先用系统字体显示，等下载完再替换，但下载过程该慢还是慢。
本地加载不一定比 CDN 快，CDN 好歹有全球节点加速，你本地服务器带宽不一定够。
真正有效的做法是字体子集化，就是只保留你实际用到的字。几千个常用字和几万个生僻字差别巨大，做完子集化可能就几百 KB。
具体操作可以用 font-spider 或者 online-font-converter 这种工具，把你的文字内容（或者只取常用 3500 字）提取出来生成一个新的 woff2 文件。
另一个办法是加预加载，在 HTML head 里写：
这样浏览器会提前开始下载，但不保证快多少，根本还是得把文件体积降下来。
如果你的字体只是用于标题或者少量文字，用子集化效果立竿见影。如果页面到处都在用，那得考虑下是不是非用不可，或者用系统字体栈做 fallback 体验会更好。
解决这事儿就两步：裁剪字体 + 预加载。
第一步，去把字体文件裁剪一下，只保留你页面里用到的字。比如你标题就几个字，没必要把整个字库都塞进去。用 font-spider 或者在线工具跑一下，文件能从 5MB 变成 50KB，速度立马起飞。
第二步，在 HTML 里加 preload，别等 CSS 解析完了才发现要加载字体。
直接用这个写法：
HTML head 里加这个：
CSS 保持这样就行，确保有后备字体：
另外检查一下服务器有没有开 Gzip 或者 Brotli 压缩，woff2 压缩后还能再小一半。别硬抗。