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

我正在使用 Bootstrap 和基本 HTML 代码开发前端 HTML 页面。我需要打印特定产品的价格，例如 63 美元。我希望它在同一行，但 $ 的大小需要小于数字。我如何实现这一目标？

最佳答案

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

<span><b>$</b>63</span>

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

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

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

<span>$63</span>

关于html - 如何在 HTML 的同一行中显示 2 种字体大小的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22634874/