页面跳转时字体闪烁的解决方案

本文章更适用于解决Astro框架的问题

一般来讲，当你为自己的网站设置一个全局字体时，若部署后不经过处理难免会遇到每次跳转页面时字体闪烁的问题，原理是：客户端路由会重建文档对象模型并重新解析样式，浏览器会重新请求字体，在字体没有请求成功之前，会优先使用默认字体，请求成功后则会替代默认字体，其过程引发的闪烁

解决方法

而现在要做的是：为你的静态托管服务器添加一个配置文件，来告诉服务器自动缓存字体资源。

如果你是Vercel托管平台，请在项目的根目录新建一个vercel.json文件。

{
  "headers": [
    {
      "source": "/fonts/(.*)",
      "headers": [
        {
          "key": "Cache-Control",
          "value": "public, max-age=31536000, immutable"
        }
      ]
    }
  ]
}

如果你是Netlify托管平台，则在项目的根目录新建一个netlify.toml文件。

[[headers]]
for = "/fonts/*"
[headers.values]
Cache-Control = "public, max-age=31536000, immutable"

max-age：缓存时间（秒）

immutable：告诉浏览器这个文件永远不会变，期间完全不跟服务器通信。

public：允许 CDN、浏览器多层缓存。