CSS小技巧，实现金额样式~

思考

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

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

    <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;
    }

效果如下：

size-adjust+ unicode-range 的兼容性在当下并不是太小，不支持safari。所以采用的时候要注意这一点。