标签内的不同字体答案

【问题标题】：Different fonts inside a label标签内的不同字体
【发布时间】：2013-03-05 21:13:29
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

.smaller {
    font-size: 5px;
}

【讨论】：

5px 可能有点矫枉过正:-)
@LittleBigBot 我的意思是，0.9em :-)

【解决方案2】：

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

1234<small>B</small>

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

small { font-size: 80%; }

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

【讨论】：

好的，但是这个标签都不一样，我不知道最后有没有那个字母，也可以没有。我有很多，有没有办法检查最后一个字母是否是字母，如果是，则将其变小，如果不是，则没有任何改变。我需要一个动态函数。
那么您需要一个函数，使用服务器端或客户端编程语言，插入small 标记或其他合适的标记。 HTML 和 CSS 没有函数（只是一些函数符号），并且没有用于“最后一个字母”的 CSS 选择器。
@laura.graham 你至少需要 javascript 来做这样的事情。
好的，我知道，但是我怎样才能插入那个“小”标记呢？你能写给我做这个的java脚本函数吗？

【解决方案3】：

watson 有它........但让我想想 CMS 的想法......如果你只想小写唯一的字母和数字保持不变，您可以这样做：

HTML：

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

或

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

CSS：

.lowMe {text-transform: lowercase}

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

【讨论】：