为何在Tailwind/React.js项目中无法使用本地字体？

针对你在Next.js+Tailwind项目中加载本地Noto Sans字体遇到的问题，给你几个具体的排查和修复步骤：

1. 确认路径别名配置 #

你在@font-face里用了@/assets/fonts/...的路径，Next.js默认不识别@别名，需要手动配置：
在项目根目录的jsconfig.json（或tsconfig.json，如果用TypeScript）里添加：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2. 修正@font-face规则 #

你的字体声明有几个细节需要完善：

• 本地字体名称可能和系统里的不一致，优先加载线上文件更稳妥；
• 必须指定字体格式format('woff2')，帮助浏览器识别；
• 添加font-display: swap避免页面加载时的闪烁：

@font-face {
  font-family: 'notosans';
  src: url('@/assets/fonts/notosans-semibold2.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

如果确实想优先用本地字体，要确保本地安装的字体名称和local()里的参数完全一致，比如系统里的Noto Sans SemiBold的实际名称可能是Noto Sans SemiBold，而不是notosans-semibold2，可以在系统字体管理器里确认。

3. 完善Tailwind字体族配置 #

给自定义字体添加fallback字体，避免字体加载失败时排版混乱：

// tailwind.config.js
fontFamily: {
  sans: ['Inter', ...defaultTheme.fontFamily.sans],
  display: ['Lexend', ...defaultTheme.fontFamily.sans],
  notosans: ['notosans', ...defaultTheme.fontFamily.sans], // 添加默认sans作为 fallback
},

4. 确保字体文件被正确打包 #

如果用的是Next.js 13+的App Router，也可以把字体文件放到public/fonts目录下，然后路径写成/fonts/notosans-semibold2.woff2，这样更直接，不需要依赖路径别名：

@font-face {
  font-family: 'notosans';
  src: url('/fonts/notosans-semibold2.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}

5. 测试验证 #

在组件里使用字体时，要同时指定字体族和对应的字重：

<div className="font-notosans font-semibold">测试Noto Sans SemiBold字体</div>

打开浏览器开发者工具，到「网络」面板查看字体文件是否加载成功，或者到「元素」面板的「计算样式」里看字体是否生效。

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