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

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

坚果大叔
2022-04-16 22:37:43分享阅读 2,742

思考

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

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自定义指令
上一篇
瞎溜达
下一篇
今日天气
标签
CSS (16) Filter (2) Flex (2) Git (3) html (3) JavaScript (15) Jquery (2) JS (4) linux (2) localstorage (2) mac (1) map (2) mongoDB (1) python (3) set (2) vite (2) vue (9) websocket (1) wordpress (2) 二维码 (1) 傍晚 (2) 刷新页面 (1) 字符串 (5) 对象 (3) 小程序 (6) 年终 (1) 微信 (9) 微信机器人 (5) 总结 (1) 数据类型 (3) 数组 (5) 日常问题 (4) 服务器 (1) 朝阳 (1) 正则 (3) 生活 (6) 移动端 (2) 空地 (1) 组件 (1) 节流 (1) 记录 (3) 远方 (1) 防抖 (1) 验证码 (1) 高楼 (1)
近期文章
  • 微信小程序批量提交后台审核
  • 新年快乐🎉
  • Home
  • 随便转转!
  • 2022!充满魔幻的一年!
归档
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年8月
  • 2022年7月
  • 2022年6月
  • 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月
  • 2012年12月
  • 2002年11月
微信小程序批量提交后台审核
2023-01-29 17:56:58
114 0 1
Home
2023-01-19 13:49:05
64 0 0
2022!充满魔幻的一年!
2022-12-31 21:09:51
142 0 0
新冠症状
2022-12-25 20:53:52
118 0 1
2
  • 2
博主

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

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

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