坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 分享 › CSS小技巧,实现金额样式~

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

坚果大叔
2022-04-16 22:37:43分享阅读 7,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
赞赏 赞(3)
本文系作者 @坚果大叔 原创发布在 坚果大叔。未经许可,禁止转载。
Vue3自定义指令
上一篇
瞎溜达
下一篇
在小程序中查看
搜你想看的
聚合文章
Vue-Quill-Editor图片上传(转载)
一晃又周三了
重学JavaScript之基本概念(中) => 操作符
一些装机单
闲言碎语
Memos
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
559 0 0
PC微信多开和防撤回~
2025-02-25 20:51:26
1,777 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
5,006 6 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
2,333 5 2
3
  • 3
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
317
文章
125
评论
365
喜欢