Next.js中Google Fonts权重传数组与字符串的差异探究

// 代码1：传入字重数组
const notoSans = Noto_Sans_EN({
  weight: ['500', '400'],
  subsets: ['latin'],
});

// 代码2：传入单个字重字符串
const notoSans = Noto_Sans_EN({
  weight: '400',
  subsets: ['latin'],
});

一、传入数组与单个字符串的核心区别 #

• 传入数组时：会一次性加载数组内所有指定的字重（示例中是400常规、500半粗），页面后续可以直接使用这些字重的原生字体，无需额外请求。
• 传入单个字符串时：仅加载指定的单个字重（示例中仅400常规），其他未加载的字重无法直接调用原生字体文件。

二、CSS指定font-weight: bold时效果不同的原因 #

CSS里的font-weight: bold默认映射的是700字重，但你的两段代码都未加载700字重，浏览器的处理逻辑因此产生差异：

• 对于代码1（加载了400+500）：浏览器会在已加载的字重中选择最接近700的选项，也就是500半粗。这是字体厂商设计的原生半粗字重，笔画粗细均匀、边缘清晰。
• 对于代码2（仅加载400）：没有更接近的原生粗体字重可用，浏览器会自动对400常规字体做像素级加粗模拟——强行拉伸字体笔画实现粗体效果，这种模拟出来的粗体边缘发虚、笔画不均匀，和原生设计的粗体质感差异明显。

内容的提问来源于stack exchange，提问作者pvp11