纯CSS头像组件内文字自适应

type
status
date
slug
summary
tags
category
icon
password
ant design的头像组件中有一个效果就是会根据头像内文字的数量自动缩放文字大小
这是Ant Design的效果，很棒
这是Ant Design的效果，很棒
现在我们有了CSS的容器查询单位（Chrome 105+支持）之后，可以轻松的只使用CSS实现这个效果
为了大家比较方便的测试，这里给出HTML代码，方便直接复制拿去测试，这里使用了CDN上的vue2和UnoCSS的运行时，这只是方便写Demo，原理并不依赖这俩，没有这两个依赖你依旧可以将它用在任何地方。
下面是可以真实运行的代码
 
正则匹配汉字六种算法思想
拙见
《Ultralearning（超学习）》TL;DR
《影响力：说服心理学》TL;DR
认知偏差手册
《富爸爸，穷爸爸》TL;DR
《人性的弱点》TL;DR
规避笔记陷阱 [译]
如何向人类提问 [译]
前端程序员简历教程 + 模板📜
最优停止理论：解读秘书问题中的37%法则
工具应用
在Windows中，搜狗输入法输出直角引号「」的优雅方式
自建Docker Hub镜像方法
Reality自建教程
利用GitHub Action自动备份Notion数据到仓库
nvm-desktop的使用
Clash Verge系列使用最佳实践
Volta的使用
⭐收集有特色的库
nvm-windows的使用
前端技术
一些适用于中国境内的CDN整理
html标签的lang属性写法
CSS新用法 - mask、CSS嵌套语法🎐
CSS新用法 - @property、initial-letter、color-mix()、@media范围写法🎐
CSS新用法 - color-scheme、accent-color、revert、revert-layer、独立的transform🎐
CSS新用法 - 颜色格式、@layer、容器查询、aspect-ratio🎐
CSS新用法 - font-variation-settings、!important、hwb()、lab()、lch()、oklab()、oklch()🎐
CSS新用法 - :modal、::backdrop、:picture-in-picture、:placeholder-shown、inset、scrollbar-gutte、backdrop-filter🎐
CSS新用法 - min()、max()、clamp()、:where()、:is()、:has()🎐
正则匹配汉字
纯CSS头像组件内文字自适应
CSS 专业技巧
前端工程化入门06 - 前端监控
前端工程化入门05 - 测试
前端工程化入门04 - 构建工具
前端工程化入门03 - 前端组件化
前端工程化入门02 - 代码规范
前端工程化入门01 - 技术选型
Prettier、ESLint配置及注释
Vue2起项目，我做了这些事
DOM尺寸相关api
Vue2的12种和Vue3的7种组件通信
JavaScript复杂判断的优雅写法
数组相关的杂七杂八
在Vue中实现右键菜单
除了Symbol和SVG，还能这样实现多彩字体图标
几种数组去重的方式
AI技术
如何编写高质量AI Prompt
Chat GPT最佳实践 [译]
其他知识
公共DNS服务介绍
那些有趣的顶级域名
编程知识
六种算法思想
函数式编程术语