IE11下常规字体回退至Times New Roman问题求助

这问题我之前帮不少开发者排查过，IE11对@font-face的属性匹配逻辑特别“较真”，尤其是font-weight和字体族名的处理，咱们一步步来搞定：

核心问题分析 #

看你给出的Sass混入调用，有两个关键问题很可能导致IE11不识别常规字体：

1. font-weight参数用了字符串而非数值：IE11对字符串形式的'Regular'支持不佳，更偏好标准的数值（比如400对应常规，700对应加粗）。
2. 每个字体用了独立的字体族名：你给常规和加粗字体分别定义了test-Regular、test-Bold这类族名，IE11在区分同系列字体时，更依赖统一族名+不同font-weight的组合方式。

解决方案步骤 #

1. 修正Sass混入的参数传递

首先确认你的font-face混入参数顺序是否正确，常规的兼容式混入应该是这样的（如果你的混入不是这个结构，先调整参数位置）：

@mixin font-face($font-family, $file-path, $font-weight: 400, $font-style: normal, $file-format: ttf) {
  @font-face {
    font-family: '#{$font-family}';
    src: url('#{$file-path}.#{$file-format}') format('#{$file-format}');
    font-weight: $font-weight;
    font-style: $font-style;
    font-display: swap;
  }
}

然后修改你的调用代码，统一字体族名，并用数值指定font-weight：

// 常规字体：font-weight用400（对应normal）
@include font-face('test', './assets/fonts/test_Regular', 400, normal, 'ttf');
// 加粗字体：font-weight用700（对应bold）
@include font-face('test', './assets/fonts/test_Bold', 700, normal, 'ttf');
// 压缩版常规字体
@include font-face('testCondensed', './assets/fonts/test_Cond_Regular', 400, normal, 'ttf');
// 压缩版加粗字体
@include font-face('testCondensed', './assets/fonts/test_Cond_Bold', 700, normal, 'ttf');

2. 添加IE11专属的字体格式 fallback

虽然IE11声称支持TTF，但实际测试中，补充EOT格式的字体能大幅提升兼容性。你可以扩展混入，同时引入EOT和TTF：

@mixin font-face($font-family, $file-path, $font-weight: 400, $font-style: normal) {
  @font-face {
    font-family: '#{$font-family}';
    // IE11优先加载EOT格式
    src: url('#{$file-path}.eot');
    src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'),
         url('#{$file-path}.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: $font-style;
    font-display: swap;
  }
}

你需要用工具把TTF字体转成EOT格式，放在同一路径下。

3. 检查编译后的CSS输出

确保最终生成的@font-face规则里，font-weight是数值而非字符串。比如如果编译后出现font-weight: 'Regular'，IE11会直接忽略这条规则，必须是font-weight: 400才会生效。

4. 验证字体路径

IE11对相对路径的解析和现代浏览器略有差异，你可以试试把路径改成绝对路径（比如/assets/fonts/test_Regular），或者检查编译后的CSS里src的路径是否正确指向字体文件。

最后验证 #

修改完成后，在IE11中测试时，可以打开开发者工具的“网络”面板，检查常规字体是否被成功加载——如果之前是加载失败，现在应该能看到200的状态码。

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