Next Js 11/12，Tailwind和Google Fonts的问题

tzcvj98z 于 2023-05-17 发布在 Go

关注(0)|答案(1)|浏览(235)

有人能解释一下为什么下面的两个结构都适用于NextJs 11，而NextJs 12只适用于后者。如果我尝试在Tailwind之后的Next 12中导入字体，它会被忽略，并且不会加载来自@import的css。

/*Works with Next 11 only*/
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/*Works with Next 11 & Next 12*/
@import url('https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

其余配置相同。我只将Next版本从11.1.4更改为12.3.4。我用Node 16.18.0和14.19.0测试了它。没有任何变化，在TailwindCSS之后导入的字体在Next 12中被忽略。

next.js

来源：https://stackoverflow.com/questions/76263062/nextjs-11-12-tailwind-and-problem-with-google-fonts

1条答案

按热度按时间

cyej8jka1#

新添加的next/font包括内置的自动自托管任何字体文件。这意味着您可以以零布局偏移的方式最佳地加载Web字体，这要归功于使用的底层CSS大小调整属性。以下是文档中的一个片段：

import { Roboto } from 'next/font/google';
 
const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
});
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={roboto.className}>
      <Component {...pageProps} />
    </main>
  );
}

请参阅official documentation了解更多信息。

赞(0）回复(0）举报 2023-05-17

我来回答

Next Js 11/12，Tailwind和Google Fonts的问题

1条答案

相关问题

热门标签

最新问答