nextjs 使用思源字体

Next.js 与思源字体结合，充分发挥Next.js在页面加载速度和搜索引擎优化方面的优势，又能通过思源字体的优秀排版特性提升用户体验。

V13以上Next.js 中的 

 模块提供了对 Google Fonts 的访问，它包含超过 1500 种开源字体，这些字体均免费且可用于商业项目。该模块会自动优化字体加载，提升网站性能

1.首先导入

import { 
Noto_Sans_SC 
} from "next/font/google";

2.然后定义字体

const notoSansSC = Noto_Sans_SC({
  weight: ['700'], // 可选字重：400（常规）、500（中等）、700（粗体）
  subsets: ['latin'], // 必须指定字体子集
  display: 'swap', // 字体加载策略：先显示 fallback 字体，加载完成后替换
});

3.然后在页面中烤鱼直接使用.

<p className={`${notoSansSC.className}  text-xs `}>
   这里是测试字体显示
  </p>

4.最后还有哪些字体可以使用?

全部字体可以通过https://fonts.google.com/variablefonts 查询

思源宋体

思源黑体_

_

文档参考

https://nextjs.org/docs/app/getting-started/fonts#google-fonts