Kri*_*jar 22 fonts reactjs next.js google-fonts tailwind-css
按照文档并使用提供的代码添加 _document.js 文件：
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
render() {
return (
<Html>
<Head>
<link href="https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700&display=swap" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
当我使用 chrome 扩展字体检查器并在检查器中进行验证时，它指出它使用默认字体。知道如何让它发挥作用吗？我使用 tailwindcss 可能会受到一些干扰吗？
小智 14
在全局变量.css中
/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Kurale&display=swap');
/* From Public Directory */
@font-face {
font-family: 'Kurale';
src: url('/fonts/Kurale.ttf');
font-style: medium;
font-weight: normal;
font-display: swap;
}
小智 5
导入 globals.css 或 _app.tsx 中导入的样式表中的所有字体
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Kdam+Thmor+Pro&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lobster&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poiret+One&display=swap");所有字体都必须单独导入。对我来说，将它们全部导入到制作中是行不通的。
| 归档时间： |
|
| 查看次数： |
30504 次 |
| 最近记录： |