格式、生成文件、路径均正确时CSS @font-face不生效问题求助

解决方案 #

• 首先修正路径分隔符：Web标准路径统一使用正斜杠/，不要使用Windows系统的反斜杠\。如果你的CSS文件与Fonts文件夹处于同级目录，将所有路径改为相对路径格式，修正后的代码参考如下：

@font-face {
    font-family: 'Sevastopol_Interface';
    src: url('./Fonts/Sevastopol-Interface/Sevastopol-Interface.eot');
    src: url('./Fonts/Sevastopol-Interface/Sevastopol-Interface.eot?#iefix') format('embedded-opentype'),
        url('./Fonts/Sevastopol-Interface/Sevastopol-Interface.woff2') format('woff2'),
        url('./Fonts/Sevastopol-Interface/Sevastopol-Interface.woff') format('woff'),
        url('./Fonts/Sevastopol-Interface/Sevastopol-Interface.ttf') format('truetype'),
        url('./Fonts/Sevastopol-Interface/Sevastopol-Interface.svg#Sevastopol-Interface') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

• 按F12打开Chrome开发者工具，切换到「网络」面板，刷新页面后筛选「字体」类资源，检查对应字体文件是否加载成功：
  • 如果出现404报错，说明路径配置仍有错误，可点击报错的资源链接查看实际请求的路径是否和预期一致，对应调整路径层级即可
  • 如果出现403或者CORS报错，说明服务器没有配置字体资源的访问权限或跨域规则，调整服务器配置即可
  • 如果出现MIME类型相关警告，需要在服务器配置中添加对应字体格式的MIME类型，woff2对应font/woff2、woff对应font/woff、ttf对应font/ttf
• 切换到开发者工具的「元素」面板，选中你要应用字体的元素，查看「计算样式」中的font-family属性，确认没有更高优先级的CSS规则覆盖了你设置的字体
• 如果确认字体加载成功但仍未生效，检查你设置的font-weight和font-style是否和@font-face中声明的一致，当前你声明的是normal字重和常规样式，如果对应元素设置了bold或italic也会导致字体无法匹配

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