IE11中本地安装Open Sans字体比网页字体显示偏粗的技术求助

这问题我之前帮不少开发者排查过，IE11在字体匹配优先级和渲染逻辑上确实有不少坑，尤其是本地安装字体和网页内嵌字体冲突的时候。结合你的场景（已经把Google字体本地集成），给你几个靠谱的解决方案：

• 给网页字体设置独特的字体名称，彻底规避冲突
  这是最直接有效的办法，把你内嵌的Open Sans字体命名一个和本地字体不一样的别名，比如'Open Sans Web'，这样IE11就不会把它和用户本地的'Open Sans'混淆了。示例代码：

  /* 常规字重 */
  @font-face {
    font-family: 'Open Sans Web';
    src: url('opensans-regular.woff2') format('woff2'),
         url('opensans-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
  }
  /* 粗体字重 */
  @font-face {
    font-family: 'Open Sans Web';
    src: url('opensans-bold.woff2') format('woff2'),
         url('opensans-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
  }
  /* 页面样式中使用这个别名 */
  body {
    font-family: 'Open Sans Web', sans-serif;
    font-weight: 400; /* 明确指定字重，避免浏览器自动推断 */
  }
  

• 严格指定@font-face的字重、样式和拉伸属性
  IE11有时候会忽略字重设置，优先匹配本地字体中“看起来相近”的变体。所以一定要在每个@font-face规则里明确font-weight、font-style甚至font-stretch，让浏览器没有模糊匹配的空间。比如不要只写font-weight: normal，要写成具体的数值400，粗体对应700，这样浏览器能精准加载你提供的字体文件。

• 确认本地集成的字体文件本身没问题
  有时候问题出在字体文件上——比如你下载的“Regular”版本其实是粗体，或者文件损坏导致渲染异常。可以用Windows自带的字体查看器打开你下载的字体文件，检查它的字重属性是否和你预期的一致（比如Regular对应400，Bold对应700）。

• 最后手段：调整IE11的字体渲染属性
  如果上面的方法都没用，可以试试针对IE11添加特定的渲染属性，比如：

  * {
    -ms-font-feature-settings: "liga" 0;
    -ms-text-size-adjust: 100%;
  }
  

  不过这个属于hack手段，建议优先用前面的方法解决根源问题。

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