IE11中HTML实体渲染未继承容器字体的问题排查求助

啊，IE11这老伙计又搞事情了！我之前也踩过类似的坑，太懂你这种看着好好的样式突然跑偏的崩溃感了。结合你说的情况，这大概率是IE11对特殊HTML实体的字体优先级处理机制在作祟，下面给你拆解原因和可行的解决办法：

可能的核心原因 #

• IE11对特殊符号的字体强制fallback：像℃（℃/℃）、℉（℉/℉）这类属于“特殊符号”范畴的HTML实体，IE11会默认把它们归为“系统符号类”，优先调用系统内置的符号字体（比如Windows的Segoe UI Symbol），完全忽略你给容器设置的自定义font-family——哪怕你的字体里明明有这些符号，它也会固执地用系统字体。
• 字体缺失符号时的异常 fallback：如果你的自定义字体本身不包含温度符号的字形，IE11不会像Chrome、Firefox那样从font-family列表里依次找支持的字体并继承样式，而是直接跳转到系统默认符号字体，导致样式完全脱节。

可行的解决办法 #

• 改用字体图标/SVG替代HTML实体：这是最彻底的解决方案。比如用Font Awesome的温度图标，或者自己画个简单的SVG，这样你能完全控制它的字体、大小、颜色，根本不会被IE的奇怪机制干扰。
• 确保自定义字体包含对应符号：如果一定要用HTML实体，先检查你的字体文件——很多免费字体可能没包含这类特殊符号，换成支持全字符集的字体（比如Noto Sans这类开源字体），就能让IE乖乖继承你的font-family。
• 妥协式：指定符号字体在font-family最前面：如果暂时换不了字体，试试把符号字体放在font-family列表的靠前位置，比如：

  .temp-container {
    font-family: '你的自定义字体', 'Segoe UI Symbol', sans-serif;
  }
  

  虽然不能让符号用自定义字体，但至少能让它用你指定的符号字体，避免渲染得太突兀。

要是你能补充下具体用的字体、HTML结构这些细节，还能更精准地调整方案哦！

内容的提问来源于stack exchange，提问作者J O'Driscoll