如何用标题设计商标样式

Question

我的标题应该是这样的。 Image

当我使用 span 并减小 TM 尺寸时，我的图片看起来像这样， image

TM站不起来，为第一张图如何解决？

Answer 1

您可以使用 sup。或者，如果您使用 ™，它应该与顶部对齐。但是，如果您使用字母 "TM" 并调整 font-size，那么您可以使用 vertical-align 或 flex 布局 align-items.

.flex span, .inline span {
  font-size: .5em;
}
.flex {
  display: flex;
  align-items: flex-start;
}
.inline span {
  vertical-align: top;
}

<p>Text <sup>&trade;</sup></p>
<p>Text <span>&trade;</span></p>
<p class="flex">Text <span>TM</span></p>
<p class="inline">Text <span>TM</span></p>

How to style trade mark with heading