CSS font-variant-position怎样显示公式中的上下标字形

公式里的 x²、化学式里的 H₂O 和脚注标记都需要上下标。CSS 的 font-variant-position 可以请求字体提供更小的上标或下标替代字形，值为 super 时使用上标，值为 sub 时使用下标；它不会像 position: relative 那样把普通文字机械地挪动。

这项属性适合与 、 这样的语义元素一起使用：HTML 负责表达“这是上标或下标”，CSS 负责选择字体变体。字体没有对应字形时，浏览器可能为整段文字采用合成方案，因此还要把字体回退和可读性考虑进去。

font-variant-position 改变的到底是什么

普通的上移写法通常是改变 top、transform 或字号，再用负的 line-height 修正间距。这种方式只改变几何位置，不一定得到真正适合上标的字形。font-variant-position 则请求 OpenType 字体中的位置变体：

• normal：关闭位置替代字形；
• super：启用上标替代字形；
• sub：启用下标替代字形。

这些替代字形通常更小，并相对于字体基线绘制；字体的基线和外部 em-box 仍保持稳定。因此它更适合公式、化学式和短注释，而不是用来模拟任意图标或做自由排版定位。

用 super 和 sub 写一个最小示例

下面保留 HTML 的语义元素，再让类名决定视觉变体。代码里的注释说明了选择器和继承关系：

  E = mc2

  H2O

如果只想让一整段文字采用同一种位置变体，也可以把属性放到容器上：

.footnote-marker {
  /* 适合短脚注标记；长段落不建议整体使用上标。 */
  font-variant-position: super;
}

.chemical-number {
  /* 化学式数字使用下标字形，字体不支持时仍保留原数字。 */
  font-variant-position: sub;
}

字体没有替代字形时会发生什么

位置变体依赖当前字体。如果某个文本 run 中有字符没有对应的 super 或 sub 字形，浏览器会对这一整段采用回退方法，通常是合成一个较小并偏移的字形，而不是只让其中一个字符使用真正的替代字形。这样可以避免同一公式中相邻字符的视觉规则不一致，但也意味着最终形状会受字体影响。

可以用 font-synthesis-position 控制是否允许浏览器合成位置字形。默认允许合成时，缺字形的字体仍有机会显示可读的上下标；设置为 none 则更严格，适合必须保持字体原貌的品牌排版，但要准备字体回退后的视觉差异：

.math {
  /* 允许浏览器在字体缺少位置字形时提供合成回退。 */
  font-synthesis-position: auto;
}

.brand-math {
  /* 严格禁止位置字形合成；使用前应准备好覆盖完整字形的字体。 */
  font-synthesis-position: none;
}

注意：font-synthesis-position 的支持范围比 font-variant-position 更窄，不能把它当成所有浏览器都具备的必选依赖。页面应先保证内容可读，再把字体级精细控制作为增强。

为什么仍然应该保留 sup 和 sub

font-variant-position 只描述字体呈现，不会把普通 span 变成上标语义。对于公式、单位、注释和无障碍阅读，优先保留：

  水的化学式是 H2O，平方关系写成 x2。

如果浏览器不认识这项 CSS，sup 和 sub 仍有默认的上、下标表现；如果自定义字体没有位置字形，普通数字也仍然存在。可以用 @supports 把增强样式包起来，避免在旧浏览器上依赖不存在的属性：

@supports (font-variant-position: super) {
  .formula-super {
    /* 支持属性的浏览器使用字体位置变体。 */
    font-variant-position: super;
  }

  .formula-sub {
    /* 支持属性的浏览器使用字体位置变体。 */
    font-variant-position: sub;
  }
}

结论可以压缩成三点：用 sup/sub 保留语义，用 font-variant-position 请求字体级上下标，用字体回退和 @supports 保证不支持时仍可阅读。不要用它替代任意位置移动，也不要假设每个字体都包含完整的替代字形。

常见问题

font-variant-position: super 会改变行高吗？

规范语义上，位置替代字形共享同一 em-box 和基线，不应像增大字号那样直接撑开行盒；但具体字体和周边样式仍可能影响视觉间距。

它和 transform: translateY() 有什么区别？

前者请求字体的上标或下标字形，后者只是移动已有字形。公式和化学式优先选择语义元素加字体变体；自由装饰定位才考虑 transform。

font-synthesis-position 要不要一起写？

只有在需要明确控制缺失字形的合成策略时才写。默认的 auto 更适合普通内容，严格字体规范才考虑 none，并准备好真实字体文件。

官方参考地址：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variant-position