text-transform: uppercase 对中文无效，仅作用于ASCII字母及部分拉丁扩展字符；中英文混排时仅英文转大写，中文保持原样。
text-transform: uppercase 会让中文变成大写吗
不会。中文没有大小写概念，text-transform: uppercase 对汉字、日文假名、韩文字母等完全无效，只作用于 ASCII 字母（A–Z）和部分拉丁扩展字符（如 é、ñ）。你看到中文“不变”，不是它“没生效”，而是它根本没定义对中文的转换逻辑。
常见错误现象：text-transform: uppercase 加在含中英文混排的标题上，结果只有英文变了，中文照旧——这不是 bug，是规范行为。
- 使用场景：适合英文菜单、缩写标签（如
"API"、"PDF"）、表头（"NAME"、"DATE"） - 别指望它处理中文拼音：即使内容是
"zhang san"，设了uppercase会变成"ZHANG SAN"，但"张三"仍原样显示 - 注意字体 fallback：某些中文字体里嵌入的英文字形可能本身偏小或位置偏低，全大写后视觉上可能显得拥挤或下沉
uppercase 和 font-variant-caps 的区别
text-transform: uppercase 是“文本内容级”转换：它把字母字符映射为大写 Unicode 码位（比如 a → A），影响复制粘贴结果；而 font-variant-caps（如 font-variant-caps: all-small-caps）是“字形级”控制，不改变原始字符，只调用字体中预置的小型大写字母（small caps）字形，复制出来仍是小写。
关键差异：
立即学习“前端免费学习笔记（深入）”；
-
text-transform: uppercase兼容性极好（IE6+ 支持），font-variant-caps在 Safari 14+、Chrome 87+ 才稳定支持 - 如果需要复制时也保持大写（比如用户要复制表头
"STATUS"去查文档），必须用text-transform - 如果追求更优雅的字号/字重匹配（比如大写字母不突兀变粗变高），且兼容性允许，优先考虑
font-variant-caps: all-small-caps
为什么用了 uppercase 却没生效
最常见原因不是写错了属性，而是样式被覆盖或作用对象不对。检查三点：
- 目标元素是否被其他规则设置了
text-transform: none或lowercase？用浏览器开发者工具看“Computed”面板里的最终值 - 是否误加在父容器上，而子元素用了
text-transform: inherit但被中间某层none截断？逐层检查继承链 - 是否用了
display: inline-block或float导致换行/截断，让大写效果看起来“不完整”？可临时加outline: 1px solid red看实际渲染范围 - 某些富文本编辑器（如 TinyMCE）或框架（如 Vue 的 v-html）会剥离内联样式，需确认 CSS 是否真正应用到了最终 DOM 节点
uppercase 在按钮和表单控件里的表现
按钮（<button></button>）、输入框（<input type="submit">）默认有 UA 样式，部分浏览器（尤其是旧版 Safari）会对 button 强制应用 text-transform: uppercase，导致你写的样式被覆盖。
实操建议：
- 显式重置：给按钮加
text-transform: none，再按需设置uppercase - 避免用
uppercase处理带图标按钮的文字，因为大写字母间距变窄后，图标与文字容易粘连，建议改用letter-spacing微调 - 表单控件中，
placeholder文本不响应text-transform（除非用::placeholder伪元素单独设置）
text-transform: uppercase 是个简单但边界清晰的工具：它只动字母，不碰中文；只改显示，不改语义；容易被覆盖，也容易被误读为“全局大写开关”。真要处理多语言混合场景，得靠数据层统一格式化，而不是指望一个 CSS 属性兜底。 
