使用带有@next/字体的Typekit / Adobe字体
当前的Next.js字体优化文档和@next/字体API引用描述了如何引入Google字体和本地字体文件，但是没有描述引入Typekit /Adobe字体的最佳实践。
使用Typekit /Adobe字体以便应用Next.js优化的最佳方法是什么？
回答 1
Stack Overflow用户
发布于 2022-12-04 16:12:19
@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)：
<link rel="preconnect" href="https://use.typekit.net" crossorigin />
<!-- ... -->
<style data-href="https://use.typekit.net/plm1izr.css">
@import url('https://p.typekit.net/p.css?s=1&k=plm1izr&ht=tk&f=32266&a=23152309&app=typekit&e=css');
@font-face {
font-family: 'birra-2';
src: url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
format('woff2'),
url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
format('woff'),
url('https://use.typekit.net/af/23e0ad/00000000000000003b9b410c/27/a?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3')
format('opentype');
font-display: auto;
font-style: normal;
font-weight: 700;
font-stretch: normal;
}
.tk-birra-2 {
font-family: 'birra-2', serif;
}
</style>下面是集成套件，您可以查看它添加样式表链接的不同方式：https://github.com/vercel/next.js/tree/canary/test/integration/font-optimization/fixtures/with-typekit (其中一些方法是不推荐的，并会给出警告)。
https://stackoverflow.com/questions/74598024
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号