在跨度内添加不同字体的下标

Question

我在我的网站上显示了一个百分比，例如 44%。值和下标都是不同的字体。下标来错了。

我正在分享下面的代码：

<table>
<tr>
  <td>
    <b>
    <div style='display:block;'>
 <span style='font-size: 220px;line-height: 200px;'>44
            <span style='font-size:20px;display: inline-block;vertical-align: top;'><sup>%</sup>
 </span>
 </span>
  </div>
</b>
</td>
</tr>
</table>

我想要百分比符号就在上面并且非常接近该值。现在值和 % 符号之间有很多 space。谁能帮我解决这个问题？

提前致谢。

Answer 1

也考虑将 line-height 添加到 <sup>。

<table>
<tr>
  <td>
    <b>
    <div style='display:block;'>
 <span><span style='font-size: 220px;line-height: 200px;'>
  44<sup style='vertical-align:top;font-size:20px;line-height: 50px;'>%</sup></span>
 </span>
  </div>
</b>
</td>
</tr>
</table>

在跨度内添加不同字体的下标

Adding subscript with different font inside a span

html

css

html-table

subscript