每次我更改页面时，Nextjs都会重新加载字体，使字体像bug一样移动。我不知道为什么会这样
网址：https://listmyai.net/
在本地，一切工作正常，当我在菜单之间导航时，我不会遇到这种类型的问题。
我的布局：
import { Inter } from "next/font/google";
import Head from "next/head";
import React from "react";
import NavBar from "../common/navbar";
import Footer from "../common/footer";
const inter = Inter({ subsets: ["latin"] });
export default function Layout({
children,
title = "",
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.",
}) {
const pageTitle = title
? `Listmyai.net - ${title}`
: "Listmyai.net - AI tools catalog ";
const metaTags = (
<>
<title>{pageTitle}</title>
<meta name="description" content={description} />
</>
);
return (
<>
<div className={`${inter.className} bg-white`}>
<Head>{metaTags}</Head>
<NavBar />
<div className="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between tracking-wide md:px-4">
{children}
</div>
<Footer />
</div>
</>
);
}字符串
1条答案
按热度按时间9rnv2umw1#
Webfont的
Cache-Control标头具有public, max-age=0, must-revalidate值。这意味着，对于每个页面请求，字体文件都被重新下载。这意味着网站访问者会看到一个 * Flink 的unstylled text*（FOUT）-当文本在下载和使用预期字体之前使用后备系统字体时。考虑将
max-age调整为某个正数，例如31536000为1年（常见惯例）。这允许下载的字体文件在后续页面上重复使用，从而防止FOUT。您不会在本地体验到这种情况，因为字体文件将存储在与查看机器相同的机器上，从而将下载时间缩短到一个微不足道的时间段。