卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
首页 › 分享 › CSS小技巧,实现金额样式~

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

坚果大叔
2022-04-16 22:37:43分享阅读数 402

思考

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

CSS小技巧,实现金额样式~-卖坚果的怪叔叔

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

    <span>¥</span><span>100</span>

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

新思路

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

    <div class="price">¥100</div>

    .price::first-letter {
        font-size: 72%;
    }

效果如下:

CSS小技巧,实现金额样式~-卖坚果的怪叔叔

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

效果如下:

CSS小技巧,实现金额样式~-卖坚果的怪叔叔

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

CSS
赞赏 赞(2)
本文系作者 @坚果大叔 原创发布在 卖坚果的怪叔叔。未经许可,禁止转载。
Vue3自定义指令
上一篇
瞎溜达
下一篇
再想想
暂无评论
今日天气
摸鱼日历
摸鱼人日历
近期文章
  • 🌚🌚🌚🌚
  • TS文档
  • 密码保护:暂存
  • deep 不生效!
  • 过去的,一点记录!
归档
  • 2022年5月
  • 2022年4月
  • 2022年3月
  • 2022年2月
  • 2022年1月
  • 2021年12月
  • 2021年11月
  • 2021年10月
  • 2021年9月
  • 2021年8月
  • 2021年7月
  • 2021年5月
  • 2021年4月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
  • 2020年4月
  • 2020年3月
  • 2020年2月
  • 2020年1月
  • 2019年12月
  • 2019年11月
  • 2019年10月
  • 2019年9月
  • 2019年8月
  • 2019年7月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年10月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年3月
  • 2018年2月
  • 2017年12月
  • 2017年11月
  • 2017年9月
🌚🌚🌚🌚
2022-05-17 22:12:24
75 3 0
TS文档
2022-05-11 21:09:30
79 0 1
密码保护:暂存
2022-05-11 10:21:14
57 0 0
deep 不生效!
2022-05-03 14:37:52
180 1 1
2
  • 2
  • 0
博主

一枚佛系前端开发,会一丢丢摄影,喜欢折腾,爱好美食。分享点前端技巧、笔记以及各种有趣的APP和资源教程♥♥

友链
Lieme
公众号
西豆 崔欣 执行上下文 卖坚果的怪叔叔 集赞助手
Copyright © 2017-2022 卖坚果的怪叔叔

苏ICP备18048410号-2
  • 首页
  • 技术
  • 生活
  • 记录
  • 朋友
  • 常用代码
  • 关于
# WordPress # # CSS #
坚果大叔
192
文章
47
评论
111
喜欢