HTML标记或CSS文本格式文本相同高度

Question

我想实现这种文本格式。

<p>you 10 oz bottle</p>

文本编号“10”和文本“oz”具有相同的高度。反正有没有实现这个目标？或者我需要一些字体来实现这种文本格式？有人可以帮帮我吗。提前谢谢。

Answer 1

不是很多。但我会尝试。

＆＃13;

＆＃13;

body {
  font-family: Arial, sans-serif;
}
.size {
  font-size: 0.75rem;
  text-transform: uppercase;
}

＆＃13;

<p>
    I have a <span class="size">10 <span class="unit">oz</span></span> bottle.
</p>

＆＃13;

＆＃13;

＆＃13;

请注意源文本是小写的。应用CSS后，它是大写的。

虽然我有点担心这可能不适用于所有字体，数字，字母等。某些字符的基线定位和高度可能与 Arial 的基线定位和高度不同。这就是我在<span>中包裹 oz 的原因，因此如果需要调整字体大小，可以单独定位。

Answer 2

将您的号码包裹在您可以定位的另一个元素中，以相应地调整字体大小。或者只需将其包装在small标签中。

<span>You have <small>10</small> oz bottle</span>

<span>You have a <small>10</small> oz bottle</span>