Inter字体下HTML十六进制数的x显示为乘号？原因及修复

我正在为区块链浏览器调整样式，其中包含大量十六进制数字文本（如0xa4a282）。问题在于这些数字显示不一致：部分正常显示x符号，部分却显示类似×的乘号符号。

奇怪的是，浏览器检查器显示所有文本实际都是用x编写的（复制到文本编辑器也能证实）。

经排查，该行为取决于x后的字符：若为字母则显示x，若为数字则视觉上变为“×”。实际情况更复杂，当页面主体简化为以下代码时：

<body>
    <div>0xa 0xA 0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
    <div>0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
    <div>x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
</body>

结果中x1的显示效果和其他x+数字组合不同，推测这和x的前导字符有关。

进一步排查发现问题根源是Inter字体：移除元素的该字体样式后，异常现象消失。以下是最小复现示例（MCVE）：

CSS代码：

body {
  font-family: Inter, sans-serif;
}

HTML代码：

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">

<div>0xa 0xA 0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
<div>0x3 0x9 0x x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>
<div>x1 x2 x3 x4 x5 x6 x7 x8 x9 x0 xa xA</div>

请问该现象是什么（连字？合字？还是其他？）？如何在保留Inter字体的前提下解决此问题？我在Google Fonts测试该字体时未出现此现象。

现象分析 #

这是Inter字体的**上下文替代（Contextual Alternates）**特性导致的。Inter字体在设计时，为了优化排版体验，会在特定字符组合（比如x紧跟数字）的场景下，自动将x替换为视觉上更接近乘号的替代字形，模拟数学表达式里的乘号效果，但这种优化在十六进制文本场景下就会造成显示异常。

至于你在Google Fonts测试页面没遇到这个问题，是因为该页面默认可能禁用了上下文替代特性，或者测试的文本组合没有触发字体的替代规则。

解决方法 #

要保留Inter字体同时修复显示问题，有以下几种可行方案：

方案1：全局禁用上下文替代 #

给使用Inter字体的元素添加CSS属性，直接关闭上下文替代特性：

body {
  font-family: Inter, sans-serif;
  font-feature-settings: "calt" 0; /* "calt"是Contextual Alternates的缩写，0表示禁用 */
}

这样所有x字符都会保持原字形显示，不会被替换。

方案2：仅针对十六进制文本处理 #

如果不想全局禁用该特性，可以给包含十六进制文本的元素单独设置样式：

<!-- 给十六进制文本添加专属类 -->
<span class="hex-string">0xa4a282</span>

.hex-string {
  font-feature-settings: "calt" 0;
}

方案3：使用语义化属性控制 #

也可以用更语义化的font-variant-ligatures属性来禁用上下文连字/替代：

body {
  font-family: Inter, sans-serif;
  font-variant-ligatures: no-contextual;
}

这个属性直接明确指定禁用上下文相关的字形替代，代码可读性更高。

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