Tailwind自定义字体变体不生效问题求助

核心问题与修复步骤： #

1. 恢复并明确常规体的font-weight配置
   你在常规体的@font-face中注释掉了font-weight: 400，这会导致浏览器无法区分同一font-family下不同权重的字体文件，最终所有文本都会使用最后加载的或默认匹配的字体。

修改global.css中的常规体配置：

@font-face {
  font-family: 'EditorsNote';
  src: url('../../public/fonts/editorsNote/EditorsNote-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'EditorsNote';
  src: url('../../public/fonts/editorsNote/EditorsNote-Regular.otf') format('opentype');
  font-weight: 400; /* 取消注释，明确设置常规体权重为400 */
  font-style: normal;
}

补充：OTF字体的format参数标准写法是opentype，而非otf，虽然部分浏览器兼容简写，但使用标准值能避免潜在兼容性问题。

2. 确认字体路径与加载状态
   通过浏览器开发者工具的「网络」面板筛选「字体」类别，检查两个OTF文件是否成功加载（无404错误）。如果路径错误，浏览器会自动回退到备用字体serif，导致两个文本块样式一致。

3. Tailwind类的匹配逻辑
   Tailwind的font-thin对应font-weight: 100，未指定权重类时默认使用font-normal（对应font-weight: 400），这两个值和你@font-face中设置的权重完全匹配，配置正确后即可正常切换字体变体。

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