NextJS和TailwindCSS的字体问题(每次更改页面时字体大小都会更改)

dtcbnfnu  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(157)

每次我更改页面时,Nextjs都会重新加载字体,使字体像bug一样移动。我不知道为什么会这样
网址:https://listmyai.net/
在本地,一切工作正常,当我在菜单之间导航时,我不会遇到这种类型的问题。
我的布局:

  1. import { Inter } from "next/font/google";
  2. import Head from "next/head";
  3. import React from "react";
  4. import NavBar from "../common/navbar";
  5. import Footer from "../common/footer";
  6. const inter = Inter({ subsets: ["latin"] });
  7. export default function Layout({
  8. children,
  9. title = "",
  10. description = "Find and stay updated on the latest AI tools at Listmyai, simplifying your search for cutting-edge technology and empowering your projects with artificial intelligence.",
  11. }) {
  12. const pageTitle = title
  13. ? `Listmyai.net - ${title}`
  14. : "Listmyai.net - AI tools catalog ";
  15. const metaTags = (
  16. <>
  17. <title>{pageTitle}</title>
  18. <meta name="description" content={description} />
  19. </>
  20. );
  21. return (
  22. <>
  23. <div className={`${inter.className} bg-white`}>
  24. <Head>{metaTags}</Head>
  25. <NavBar />
  26. <div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between tracking-wide md:px-4">
  27. {children}
  28. </div>
  29. <Footer />
  30. </div>
  31. </>
  32. );
  33. }

字符串

9rnv2umw

9rnv2umw1#

Webfont的Cache-Control标头具有public, max-age=0, must-revalidate值。这意味着,对于每个页面请求,字体文件都被重新下载。这意味着网站访问者会看到一个 * Flink 的unstylled text*(FOUT)-当文本在下载和使用预期字体之前使用后备系统字体时。
考虑将max-age调整为某个正数,例如31536000为1年(常见惯例)。这允许下载的字体文件在后续页面上重复使用,从而防止FOUT。
您不会在本地体验到这种情况,因为字体文件将存储在与查看机器相同的机器上,从而将下载时间缩短到一个微不足道的时间段。

相关问题