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

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>

我希望百分比符号位于值的上方并非常接近该值。现在，值和％符号之间有很多空格。谁能帮我解决这个问题？

提前感谢。

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>