Javascript 如何在NextJs中缓存字体？_Javascript_Reactjs_Caching_Next.js

Javascript 如何在NextJs中缓存字体？

javascript reactjs caching next.js

Javascript 如何在NextJs中缓存字体？,javascript,reactjs,caching,next.js,Javascript,Reactjs,Caching,Next.js,我有两种字体，我正试图向用户显示，而没有FOIT，相反，我有一个FOUT，我希望用户不要在每次访问页面时重新下载字体我添加了字体观察者，以添加额外的FOUT回退功能。 _document.js componentWillMount() { if (process.browser) { const html = document.documentElement; html.classList.add('fonts-loading'); const

我有两种字体，我正试图向用户显示，而没有FOIT，相反，我有一个FOUT，我希望用户不要在每次访问页面时重新下载字体

我添加了字体观察者，以添加额外的FOUT回退功能。 _document.js

  componentWillMount() {
    if (process.browser) {
      const html = document.documentElement;
      html.classList.add('fonts-loading');
      const fontPoppins = new FontFaceObserver('Poppins');
      fontPoppins.load(null, 5000).then(() => {
        console.log('Poppins font has loaded.');
        html.classList.remove('fonts-loading');
        html.classList.add('fonts-loaded');
      }).catch(() => {
        html.classList.remove('fonts-loading');
        html.classList.add('fonts-failed');
      });
      const fontAvenir = new FontFaceObserver('Avenir');
      fontAvenir.load(null, 5000).then(() => {
        console.log('Avenir font has loaded.');
      }).catch(() => {
        html.classList.remove('fonts-loading');
        html.classList.add('fonts-failed');
      });
    }
  }
... (more code here)

render ( code here ) ...

// Additional FOUT?
        <Head>
          <link
            href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,600,700,800,900&display=swap"
            rel="preload"
            as="font"
          />
           ... (more code here)
        </Head>

使用next.js自定义服务器，您可以为每个文件设置缓存控制

谷歌字体的缓存控制看起来已经设置好了

html {
  font-family: sans-serif;
  -webkit-font-smoothing: antialiased;
}

.fonts-loaded html {
  font-family: Avenir, sans-serif;
}


@font-face {
  font-family: Avenir;
  src: url('/static/fonts/Avenir.ttc');
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: Poppins;
  src: url('/static/fonts/Poppins-Regular.ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl

if(pathname === '/static/fonts/Avenir.ttc' || pathname === '/static/fonts/Poppins-Regular.ttf') {
    res.setHeader('Cache-Control', 'public,max-age=31536000');
}