本地加载Gotham Narrow字体仅粗体生效，其他字重失效求助

问题描述 #

本地加载字体时，@font-face配置出现异常：仅粗体字重（700及以上）可正常生效，设置light、lighter、400-500等字重时均无法正常工作。

相关截图 #

• 网络请求截图：
• 计算样式截图：
• 字体文件截图：

现有@font-face配置代码 #

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-thin-webfont.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-light-webfont.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-book-webfont.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-medium-webfont.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-bold-webfont.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-ultra-webfont.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Gotham Narrow";
  src: local("../font/gothamnarrow-black-webfont.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

解决方案 #

1. 修正local()的使用错误 #

local()是调用用户本地已安装的字体名称，不是文件路径。你用它指向字体文件路径完全错误，浏览器找不到对应字体只会回退到系统字体。正确写法用url()指定文件路径：

@font-face {
  font-family: "Gotham Narrow";
  src: url("../font/gothamnarrow-thin-webfont.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  /* 可选：添加字体显示策略，避免页面加载时出现文本闪烁 */
  font-display: swap;
}
/* 所有字重配置同理，把local()全部替换为url() */

2. 检查文件路径是否正确 #

从字体文件截图看，文件放在font目录下：

• 若CSS文件在根目录的css文件夹里，../font/xxx路径正确；
• 若CSS直接在根目录，路径要改成./font/xxx。
  可通过浏览器开发者工具Network面板查看字体请求状态，出现404则说明路径错误，需调整。

3. 验证字体文件本身 #

部分字体文件可能存在编码或元数据错误，可用Font Forge等工具打开，查看内部字重标记是否和你配置的font-weight匹配（比如Thin对应100、Light对应300）。

4. 禁止浏览器自动合成字重 #

浏览器找不到对应字重时，可能会自动合成粗/细体，导致配置不生效。可在全局样式里明确限制：

body {
  font-family: "Gotham Narrow", sans-serif;
  font-weight: 400;
}

5. 清除浏览器缓存 #

旧的字体配置可能被缓存，导致新设置不生效。用Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面即可。

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