原来金额样式还能这么实现呀！太牛了🤙

执行上下文

发布于 2023-09-06 14:08:52

2310

发布于 2023-09-06 14:08:52

文章被收录于专栏：执行上下文

思考

如何通过一个标签实现如下效果：

一般我们实现的方式如下：

 <span>￥</span><span>100</span>

定义两个标签分别设置不同的样式来搞定。

新思路

通过CSS属性::first-letter可以通过一个标签来实现类似效果。

 <div class="price">￥100</div>
 
 .price::first-letter {
   font-size: 72%;
 }

效果如下：

first-letter的兼容性也是很好的。可以在实际项目中使用。另外，他有一个缺点就是他只能修改开头第一个字符，如果需要修改末尾单位的字符样式。也可以通过另外一个属性来设置。

size-adjust+ unicode-range

size-adjust 浏览器将调整字体大小，无论字体系列（"宋体"性质值0.58）

unicode-range 设置font-face特定的字符。

 <div class="money">100元</div>
  
 @font-face {
   font-family: smallYuan;
   src: local('PingFang SC'),
   local('PingFang SC Light'),
   local('Source Han Sans CN'),
   local('Noto Sans CJK SC'),
   local("Microsoft Yahei");
   size-adjust: 20%;
   unicode-range: U+5143;
 }
 .money {
   font-family: smallYuan;
   font-size: 24px;
   color: red;
 }

效果如下：