CSS嵌入自定义字体后HTML页面无法正常显示该字体的问题咨询

1. 补全@font-face规则包裹 #

你当前贴的字体声明代码没有套在@font-face规则块中，这是最常见的报错原因，正确的写法如下：

@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat-SemiBold.woff2') format('woff2'),
        url('Montserrat-SemiBold.woff') format('woff'),
        url('Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

2. 修正字体文件引用路径 #

你提到字体文件存放在和index.html同目录的CSS文件夹中，路径是否正确取决于你的样式写在哪里：

• 如果样式写在CSS文件夹内的.css文件中：你当前的相对路径写法正确，不需要修改
• 如果样式直接写在index.html的<style>标签中：需要在路径前添加CSS文件夹前缀，修改为：

  src: url('CSS/Montserrat-SemiBold.woff2') format('woff2'),
      url('CSS/Montserrat-SemiBold.woff') format('woff'),
      url('CSS/Montserrat-SemiBold.ttf') format('truetype');
  

3. 检查字体调用参数匹配 #

你声明的这款Montserrat字重为600，调用元素样式时必须同时匹配两个参数才能命中该字体：

• font-family属性值严格为'Montserrat'（引号可省略但大小写要完全一致）
• 元素的font-weight属性值为600，如果你需要其他字重的Montserrat，需要单独声明对应字重的@font-face规则

4. 排查文件与服务端问题 #

• 检查字体文件名大小写是否和代码中完全一致，Linux等操作系统的服务器对大小写敏感，拼写偏差会导致404
• 打开浏览器F12开发者工具，切换到「网络」面板，刷新页面看字体文件是否请求成功，有没有404、CORS跨域报错
• 如果是本地直接用file协议打开html文件测试，部分浏览器会限制本地资源加载，建议用本地静态服务打开测试

5. 检查样式覆盖情况 #

打开F12开发者工具的「元素」面板，选中要应用字体的元素，查看计算样式中的font-family属性，确认是否被更高优先级的CSS规则覆盖为其他字体。

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