下一个 tailwindcss 谷歌字体链接标签不适用
Posted
技术标签:
【中文标题】下一个 tailwindcss 谷歌字体链接标签不适用【英文标题】：Next tailwindcss google font link tag not applying 【发布时间】：2022-01-16 08:14:12 【问题描述】：因此，在 tailwind css 文件中使用 @import 是可行的，但在 _document.jsx 中使用标签却无法使用。
Chrome 开发工具显示应用了类，但应用了回退而不是下载的谷歌字体。
不确定为什么这不是。我错过了一个陷阱还是什么
顺风配置
module.exports =
content: [
"./pages/**/*.js,ts,jsx,tsx",
"./components/**/*.js,ts,jsx,tsx",
],
theme:
container:
center: true,
,
fontFamily:
fun: ['"Lobster Two"', "cursive"],
pro: ['"Source Serif Pro"', "serif"],
,
,
plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
;
_document.tsx
import Document,
html,
Head,
Main,
NextScript,
DocumentContext,
from "next/document";
class MyDocument extends Document
static async getInitialProps(ctx: DocumentContext)
const initialProps = await Document.getInitialProps(ctx);
return ...initialProps ;
render()
return (
<Html>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
href="https://fonts.googleapis.com/css2?family=Lobster+Two:wght@400;700&family=Source+Serif+Pro:wght@400;600;700;900&display=swap"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
export default MyDocument;
【问题讨论】：
【参考方案1】：这很可能是由于未正确配置 tailwind 而不是在 Next.js 中下载字体造成的。对于 Tailwind 配置，您可以在 fontFamily 属性中输入三个键：
没有 衬线 单声道请参阅文档here。
顺风配置：
module.exports =
content: [
"./pages/**/*.js,ts,jsx,tsx",
"./components/**/*.js,ts,jsx,tsx",
],
theme:
container:
center: true,
,
fontFamily:
sans: ['"Lobster Two"'],
,
,
plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms")],
;
如果您想使用 fun 和 pro 等任意值，请查看 this
【讨论】：
以上是关于下一个 tailwindcss 谷歌字体链接标签不适用的主要内容，如果未能解决你的问题，请参考以下文章
使用 TailwindCSS 时，Google 字体无法在移动设备上呈现