按@font-face教程配置后网页自定义字体仍无法正常渲染求助

问题排查及解决方案 #

• 优先检查字体文件路径是否正确
  你配置的是相对路径assets/fonts/，路径是相对于CSS文件的存储位置，不是相对于HTML页面。比如你的CSS文件存放在css/目录下，正确路径应该改为../assets/fonts/。可以打开浏览器开发者工具的「网络」面板，筛选字体请求，查看是否返回404错误，这是@font-face不生效的最高发原因。
• 检查字重匹配规则
  你在@font-face中未声明font-weight属性，但调用字体的h2、p标签都设置了font-weight: bold，浏览器会默认寻找对应字体家族的粗体字重文件，找不到就会触发 fallback 机制。Zodiak-Black本身属于900字重，需要在@font-face规则中明确声明字重属性。
• 修正错误的资源路径
  你配置的svg字体路径为webfont.svg，和其他字体文件的统一前缀assets/fonts/不符，路径错误会导致对应格式加载失败。
• 检查字体文件完整性
  确认你存放在对应路径下的字体文件没有损坏，优先验证woff2格式文件的可用性，目前绝大多数现代浏览器都会优先加载woff2格式字体。

修正后的参考代码 #

@font-face {
  font-family: 'zBold';
  src: url('assets/fonts/Zodiak-Black.eot'); /* IE9 Compat Modes */
  src: url('assets/fonts/Zodiak-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('assets/fonts/Zodiak-Black.woff2') format('woff2'), /* Super Modern Browsers */
       url('assets/fonts/Zodiak-Black.woff') format('woff'), /* Pretty Modern Browsers */
       url('assets/fonts/Zodiak-Black.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('assets/fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
  font-weight: 900; /* 明确匹配Zodiak-Black的字重 */
  font-display: swap; /* 可选，避免字体加载期间页面文字消失 */
}

h2 {
  font-size: 1.5vw;
  font-family: 'zBold', sans-serif;
  margin-bottom: 19px;
  font-weight: 900; /* 和@font-face声明的字重对应 */
}

p {
  font-size: 1vw;
  font-family: 'zBold', sans-serif;
  line-height: 24px;
  font-weight: 900; /* 和@font-face声明的字重对应 */
}

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