当前的Next.js 字体优化文档和@next/font API 参考描述了如何引入 Google Fonts 以及本地字体文件，但没有描述引入 Typekit / Adobe Fonts 的最佳实践。
使用 Typekit / Adobe Fonts 以便应用 Next.js 优化的最佳方法是什么？
@next/font尚不支持 Typekit，并且其 GitHub 存储库上没有任何相关问题（可能是由于 Typekit 本身施加的法律限制）。
但是，这并不意味着您不能在 Next.js 中使用 Typekit 字体。在 Next.js 13 之前，它有一个称为自动字体优化的功能，该功能仍然存在，并且支持 Typekit（在 参考资料中添加vercel/next.js#24834）。
它基本上会内联你的字体 CSS。所以，如果你有：
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => {
return (
<Html>
<Head>
<link rel="stylesheet" href="https://use.typekit.net/plm1izr.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default Document
然后 Next.js 将生成包含如下内容的文档head（保存对 Typekit 的请求）：
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
const Document = () => {
return (
<Html>
<Head>
<link rel="stylesheet" href="https://use.typekit.net/plm1izr.css" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
export default Document
这是集成套件，您可以查看添加样式表链接的不同方法：https ://github.com/vercel/next.js/tree/canary/test/integration/font-optimization/fixtures/with- typekit（其中一些方法已被弃用，并且会给您警告）。
| 归档时间： |
|
| 查看次数： |
5840 次 |
| 最近记录： |