javascript - 标签内的不同字体

Question

如果我有诸如“1234B”、“5678M”之类的标签……如何更改此标签，使末尾的字母小于数字的大小？

Answer 1

最简单的方法是使用small元素（这在 HTML5 中仍然是允许的，尽管使用了人为的“语义”，但对于浏览器来说它仍然意味着更小的字体大小）：

1234<small>B</small>

然后，您可以使用 CSS 来调整字体大小的缩小，例如使用

small { font-size: 80%; }

然而，这会产生印刷不良的结果，因为不同的字体大小意味着不同的笔画宽度，所以字母看起来也会更细，而且更小。在排版中，人们可能会使用字体的小型大写字形（尽管在排版中，人们通常宁愿尝试使数字和字母在大小上匹配，而不是不匹配！）。原则上这在网页上也是可能的（使用font-feature-settings: "smcp", 带前缀），尽管仍然很少见，并且它需要具有此类可用字形的字体（如 Calibri、Cambria 或 Palatino Linotype）。

Answer 2

<p>1234<span class="smaller">B</span></p>

.smaller {
    font-size: 5px;
}

Answer 3

沃森有它........但让我认为CMS在思考......如果你只想小写唯一的字母并且数字保持不变，你可以这样做：

HTML：

 <div style="text-transform: lowercase;">3529M</div>

或者

<div class="lowMe">3529M</div>
<div class="lowMe">5546D</div>

CSS：

.lowMe {text-transform: lowercase}

否则我会像提到的那样做跨度......