使用TTHoves-Regular字体时浏览器检查为何显示font-family为TTHoves-Bold？

云原生阿岚

2026-10-5

问题原因

静态资源路径配置错误
Next.js 中 public 目录是静态资源的根目录，引用时不需要加 ../public 前缀，你当前写的 src: url(../public/fonts/TTHoves-Bold.ttf) 属于无效路径，浏览器无法加载对应的字体文件，只能 fallback 到系统默认的常规字重字体，所以即使你看到元素属性是font-family: TTHoves-Bold，实际显示还是常规效果。
@font-face 配置逻辑错误
你将不同字重的同系列字体拆成了两个独立的 font-family 名称，没有通过 font-weight 属性做映射绑定。这种情况下浏览器不会自动将 font-weight: 700 和 TTHoves-Bold 关联，也不会在调用 TTHoves-Regular 时自动匹配粗体字形。
样式优先级冲突
你给.p_1指定的font-family: "TTHoves-Regular"被更高优先级的规则（比如父元素样式、全局标签选择器、!important规则、行内样式）覆盖了，所以开发者工具里看到的最终生效字体是TTHoves-Bold，和你写的规则不一致。你可以在样式面板里查看.p_1的font-family属性是否被划掉，就能定位到覆盖它的规则。

修复方案

修正 @font-face 配置，统一字体家族名称，绑定对应字重，同时修正资源路径：

@font-face {
  font-family: "TTHoves";
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/TTHoves-Regular.ttf);
}

@font-face {
  font-family: "TTHoves";
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/TTHoves-Bold.ttf);
}

调整业务CSS规则，通过font-weight控制字重即可：

.p_1 {
  font-family: "TTHoves", sans-serif;
  font-size: 16px;
  font-weight: 400; /* 常规字重 */
}

/* 需要加粗时用700字重 */
.p_bold {
  font-family: "TTHoves", sans-serif;
  font-size: 16px;
  font-weight: 700;
}