字体预加载没生效，是不是写法有问题？
我在 React 项目里用 next/font 加载自定义字体，但 Lighthouse 还是提示“确保文本在网页字体加载期间保持可见”，感觉预加载没起作用。我试过在 head 里加 link rel="preload"，但不确定是不是和 Next.js 的机制冲突了。
这是我的组件代码：
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
});
export default function Layout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}这样写应该自动处理预加载了吧？为什么还会报资源优化问题？
- 1
回答
44浏览
WOFF2 字体加载失败怎么办？
我在项目里用了 WOFF2 格式的自定义字体，本地开发没问题，但部署到线上后部分浏览器根本不加载，控制台报 404。我确认文件路径是对的，而且服务器也配置了 MIME 类型。 是不是还要加什么特殊的响...
- 2
回答
42浏览
字体预加载没生效是怎么回事？
我在项目里加了字体预加载，但页面加载时还是有明显的文字闪烁（FOIT），感觉预加载根本没起作用。 我是在 HTML 的 <head> 里加的这行： <link rel="p...
- 1
回答
29浏览
Vue中图片懒加载不生效，是写法有问题吗？
我在用 Vue 3 做一个图片列表页，想用原生 Intersection Observer 实现懒加载，但滚动时图片根本没触发加载，一直显示 loading 占位图。我查了文档也加了 rootMarg...
- 1
回答
15浏览
prefetch 资源没生效，是写法有问题吗？
我在首页加了对登录页 CSS 的 prefetch，但 Network 里根本没看到预加载请求，是不是我写错了？ 已经确认资源路径是对的，直接访问能拿到。也试过把 rel="prefetch" 放在 ...
- 1
回答
21浏览
LCP元素加载太慢，是不是我的CSS写法有问题？
我页面的LCP分数一直很差，用Lighthouse测出来是那个大图封面加载太慢。但图片本身已经压缩过了，而且用了懒加载，奇怪的是它明明在首屏却没被优先加载。 我怀疑是不是CSS里用了什么属性导致浏览器...
- 2
回答
36浏览
Next.js中字体加载闪烁问题怎么解决？
我在Next.js项目里用Tailwind CSS的Inter字体，但页面加载时总会出现字体闪烁。尝试过在_document.js里用标签引入fonts.googleapis.com，也加了font-...
- 1
回答
11浏览
Vue 路由切换时如何加过渡动画？
我在用 Vue Router 做页面切换，想加个淡入淡出的过渡效果，但试了几次都没生效。是不是我写法有问题？ 我已经在 router-view 外面包了 transition，也写了对应的 CSS 类...
- 1
回答
8浏览
为什么页面加载时间指标测出来总是不准？
我在用 Performance API 测页面加载时间，但每次刷新结果都不太一样，有时候还出现负数，是不是我写法有问题？ 我试过用 performance.timing 和现在推荐的 navigati...
- 1
回答
12浏览
K8s部署前端应用后CSS样式加载不生效怎么办？
我在本地用Docker跑前端项目一切正常，但推到Kubernetes集群后，页面的CSS样式完全没加载，字体、布局都乱了。已经确认静态资源路径配置正确，也检查了Ingress转发规则。 这是我的关键C...
- 1
回答
18浏览
WebView里加载的网页样式错乱，是不是安全策略导致的？
我在App的WebView里加载了一个本地HTML页面，结果CSS样式完全没生效，布局全乱了。明明在浏览器里打开是正常的，难道是WebView的安全限制把样式给拦截了？ 我试过加file://协议访问...
首先检查你的
next.config.js里是不是设置了什么奇怪的东西影响了字体加载。其次，确保你的生产环境配置正确，因为开发环境下有些优化可能不会生效。如果还是不行，可以试试手动在 _app.js 里加个 preload：
记住一点，字体预加载有时候受浏览器策略影响，特别是跨域设置不对的时候。别忘了检查开发者工具里的网络请求，看看字体是不是真的没预加载上。这些问题搞起来确实挺烦人的，我都折腾过好几次。