问候Stack Overflow社区!我在我的Next.js项目中使用了一些自定义字体,使用了以下CSS:
@font-face {
font-family: OpenSans;
font-display: swap;
src: url(./OpenSans-Regular.woff2) format('woff2');
}
问题是灯塔审计告诉我要预加载这些.woff2
文件,但它们被Next.js散列了。我不知道如何为字体添加link
标签和rel="preload"
。
我可以在哪里让Next.js预加载这些字体?
谢谢你!
3条答案
按热度按时间k97glaaz1#
问题在于Next.js,如果你把字体文件放在public之外的任何文件夹中,字体文件都会被编译。所以如果你把它们放在public文件夹中,然后手动引用它们,你可以像下面这样使用链接预加载。
将它们包含在Head标签中,并为浏览器兼容性指定不同的字体类型。确保在css中也正确引用它们。
k5hmc34c2#
您可以通过添加以下内容将它们预加载到
_document.js
的<Head>
组件中:4bbkushb3#
对于外部字体,您可以简单地在head组件中添加预加载链接;
至于
public
文件夹中的内部字体,这需要;next.config.js
中的file-loader
配置,用于解析哈希文件名你可以在下面找到我的样本;
我创建了一个
Layout.tsx
,它 Package 了我的其他组件,其主要目的是不存在重复的 meta标记-但这与问题无关。这是我在
Next@10.0.5
中的代码-预加载外部和内部字体。应用程序tsx
布局.tsx
下一环境d.ts
下一个配置js