为何HTML实体在不同浏览器中的渲染表现存在差异？

差异根因 #

该问题由Chrome和Firefox的字体 fallback 规则不一致导致：
→对应的Unicode字符是U+2192，Firefox默认会优先使用当前上下文指定的字体渲染该字符，字号、基线都和前后文本保持一致，符合预期。Chrome无额外样式指定时，会 fallback 到自带的符号字体渲染该箭头，这款字体的箭头字形本身字号偏小、基线偏下，因此会出现偏小、下沉的显示问题。

修复方案 #

• 方案1：统一指定包含箭头字形的字体族
  给包含→的元素指定覆盖范围全的字体族，确保Chrome能找到和正文一致的字体来渲染箭头：

.arrow-container {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

• 方案2：单独校正箭头样式
  如果不想改动全局字体，可以给→单独包裹标签做微调：

<span class="arrow-adjust">&rarr;</span>

配套CSS：

.arrow-adjust {
  font-size: 1.1em;
  position: relative;
  top: -0.1em;
}

可以根据实际使用的字体调整数值，直到双端显示效果对齐。

• 方案3：使用SVG替代实体字符
  如果要求多端100%一致，直接用内嵌SVG箭头是最稳妥的方案，完全不受浏览器字体渲染规则影响，显示效果可控。

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