如何在 HTML 的同一行中显示 2 种字体大小的文本？答案

【问题标题】：how to have text of 2 font sizes in same line in HTML?如何在 HTML 的同一行中显示 2 种字体大小的文本？
【发布时间】：2020-10-18 02:09:24
【问题描述】：

我正在使用引导程序和基本 HTML 代码开发前端 HTML 页面。我需要打印特定产品的价格，比如 63 美元。我希望它在同一行，但 $ 的大小需要小于数字。我如何做到这一点？

【问题讨论】：

【解决方案1】：

 span { font-size: 3em;}
 span b { font-size: 60%; font-weight: normal }

&lt;span&gt;&lt;b&gt;$&lt;/b&gt;63&lt;/span&gt;

您也可以避免使用嵌套元素来包装货币符号并使用::first-letter 伪类对其进行样式设置，但这需要block 或inline-block 父元素，例如

span { 
   font-size: 3em; 
   display: inline-block; }

span::first-letter { font-size: 60%; }

&lt;span&gt;$63&lt;/span&gt;

【讨论】：

【解决方案2】：

仅 HTML：使用

两个span标签和2.不同的字体大小样式

&lt;span style="font-size: 25px;"&gt;Rs&lt;/span&gt; &lt;span style="font-size: 50px;"&gt;2000/-&lt;/span&gt;

【讨论】：

【解决方案3】：

查看http://jsfiddle.net/RPf4N/2/

html

<div id="mydiv">$<a>63</a></div>

你的css

#mydiv
{
    font-size:20px;
}
#mydiv a
{
    font-size:100px;
}

【讨论】：