HTML中如何在指定字母的正上方添加小型文本？

以下是几种优于嵌入JPEG图片的实现方式，可按需选择：

方案1：原生HTML <ruby> 标签实现（无额外依赖，最简便） #

<ruby> 是HTML原生用于标注上标注释的标签，默认会将 <rt> 标签内的内容居中显示在主体内容正上方，完全匹配需求。
示例代码：

<style>
/* 可选自定义样式，调整间距和字号 */
ruby {
  font-size: 20px;
  margin: 0 2px;
}
rt {
  font-size: 12px;
  line-height: 1;
}
</style>

<!-- 直接使用 -->
<ruby>A<rt>2</rt></ruby>
<ruby>B<rt>4</rt></ruby>
<ruby>C<rt>6</rt></ruby>

所有主流浏览器均兼容该标签，渲染效果清晰，支持直接选中复制内容。

方案2：纯CSS相对定位实现（高度自定义） #

如果需要更灵活的样式控制，比如调整数字颜色、偏移位置，可以用CSS定位实现：
示例代码：

<style>
.char-wrapper {
  position: relative;
  display: inline-block;
  line-height: 1.5;
  margin: 0 3px;
}
.char-wrapper .top-num {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
}
</style>

<span class="char-wrapper">
  A
  <span class="top-num">2</span>
</span>
<span class="char-wrapper">
  B
  <span class="top-num">4</span>
</span>

你可以自行修改top值调整数字和下方字母的间距，修改font-size调整数字大小。

方案3：数学公式场景适配 #

如果你的项目需要大量用到这类数学标注，可以使用成熟的公式渲染方案：

• KaTeX/MathJax 语法：输入 $\overset{2}{A}$ 即可渲染出A正上方带2的效果，支持复杂公式组合。
• 也可以使用原生MathML语法实现，不过兼容性略差于前两种方案。

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