SCSS项目中自定义字体HankenGrotesk-Bold无法显示求助

以下是针对你遇到问题的具体排查方向和解决办法：

1. 字体文件路径错误（最常见原因） #

你的SCSS文件路径是src/scss/base/typography.scss，编译后的CSS文件在src/css/main.min.css。SCSS里写的../../assets/fonts/HankenGrotesk-Bold.ttf是相对于SCSS文件的路径，但编译后CSS会保留这个路径，此时从CSS文件出发，正确的相对路径应该是../assets/fonts/HankenGrotesk-Bold.ttf。

修改typography.scss中的路径：

@font-face {
    font-family: HankenGrotesk-Bold;
    src: url('../assets/fonts/HankenGrotesk-Bold.ttf'); // 调整路径层级
    font-weight: bold;
    font-style:normal;
}

也可以直接使用项目根路径的绝对路径，避免层级混乱：

src: url('/assets/fonts/HankenGrotesk-Bold.ttf');

2. @font-face命名与使用逻辑不规范 #

你将font-family设为HankenGrotesk-Bold，同时指定font-weight: bold，这种写法可能导致浏览器匹配异常。规范的做法是用字体家族名作为font-family，通过font-weight区分粗细：

// typography.scss
@font-face {
    font-family: HankenGrotesk; // 统一家族名
    src: url('../assets/fonts/HankenGrotesk-Bold.ttf');
    font-weight: bold;
    font-style: normal;
}

// variables.scss
$HG-Bold: HankenGrotesk;

// main.scss
h1 {
    font-family: $HG-Bold;
    font-weight: bold; // 明确指定粗细
}

3. 字体文件兼容性或损坏问题 #

• 直接在浏览器地址栏输入字体文件的访问路径，确认文件能正常下载：如果打不开，说明路径错误；如果能下载但不显示，可能是文件损坏，重新替换字体文件。
• 补充多格式字体提高兼容性，现代浏览器优先支持woff2格式：

@font-face {
    font-family: HankenGrotesk;
    src: url('../assets/fonts/HankenGrotesk-Bold.woff2') format('woff2'),
         url('../assets/fonts/HankenGrotesk-Bold.woff') format('woff'),
         url('../assets/fonts/HankenGrotesk-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

4. CSS样式被覆盖或优先级不足 #

检查reset.scss中是否存在全局字体重置规则（比如* { font-family: sans-serif; }），如果有，需要确保h1的font-family优先级更高，或者调整reset规则：

// 提高优先级的写法
h1 {
    font-family: $HG-Bold !important; // 临时排查用，不建议长期使用
    // 或添加更具体的选择器，比如 .content h1
}

5. 浏览器缓存或编译问题 #

• 强制刷新页面（Ctrl+Shift+R）清除浏览器缓存，避免加载旧的CSS或字体文件。
• 检查编译后的main.min.css，确认@font-face规则是否完整输出：如果没有，说明Live SASS Compiler的编译配置可能存在过滤或压缩异常，调整编译器设置（比如关闭不必要的代码移除规则）。

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