使用@Font-face加载EOT字体文件时遇到的问题

我来帮你梳理几个常见的问题点，毕竟字体加载没生效这种情况，大多是细节没踩对：

• 字体格式与format值不匹配
  你代码里写的format("embedded-opentype")是针对.eot格式字体的，而你的字体文件是.otf，对应的format应该是"opentype"。这是很容易犯的小错误，修改后应该是：

  @font-face { 
    font-family: "myFont"; 
    font-style: normal; 
    font-weight: 300; 
    src: url("/wwwroot/assets/fonts/sampleFont.otf") format("opentype"); 
  }
  

• 确认Webpack的字体资源处理配置
  虽然Webpack构建没报错，但如果没有正确配置字体资源的加载规则，字体文件可能没有被正确复制到输出目录。如果是Webpack 5+，可以用asset modules来处理：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.(woff|woff2|eot|ttf|otf)$/i,
          type: 'asset/resource',
          generator: {
            filename: 'assets/fonts/[name][ext]' // 确保输出路径和你引用的路径一致
          }
        }
      ]
    }
  }
  

  这样Webpack会把字体文件打包到指定的输出目录，保证你的引用路径能找到文件。

• 验证浏览器实际请求的路径
  打开Chrome开发者工具（F12）切换到「Network」标签，刷新页面后搜索你的字体文件名，看是否能成功加载（状态码为200）。如果显示404，说明路径还是有问题：

  • 检查绝对路径/wwwroot/assets/fonts/...是否和项目部署后的根目录匹配，比如如果你的项目部署在服务器的子目录，绝对路径可能需要调整；
  • 也可以尝试改成相对路径，比如如果你的Sass文件在src/styles目录，路径可以写成../assets/fonts/sampleFont.otf（根据实际目录结构调整）。

• 检查字体文件本身
  有时候字体文件损坏或者不支持你指定的300字重，可以换一个确认可用的字体文件测试，或者用工具转换一下格式（比如生成woff/woff2格式，这两种是现代浏览器更推荐的格式，兼容性更好）。

• 清除浏览器缓存
  浏览器可能缓存了旧的字体资源，导致新字体不生效。可以尝试强制刷新页面（Ctrl+Shift+R），或者在开发者工具的「Network」标签勾选「Disable cache」后再测试。

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