text-transform 对中文无效，仅作用于拉丁字母；中文无大小写概念，其全角/半角或繁简转换需 javascript 实现。
text-transform 能不能让中文变大小写
text-transform 对中文、日文、韩文等非拉丁文字完全无效。它只作用于 Unicode 中明确标记为“大写”或“小写”的字符，而汉字没有大小写概念，浏览器遇到 text-transform: uppercase 或 lowercase 时，直接跳过中文字符，只处理其中混杂的英文字母或数字。
常见错误现象：页面里写 text-transform: uppercase 想“统一格式”，结果中文照旧，英文却意外全大写，导致中英文视觉失衡。
- 使用场景仅限纯英文文本、表单标签、按钮文字（如
"Submit"→"SUBMIT"） - 若需对中文做“全角/半角”“繁体/简体”转换，必须用 JavaScript 处理，
text-transform不参与 - 某些字体中“全大写英文”字宽不一致，可能引发布局偏移，尤其在固定宽度容器里
text-transform: capitalize 的实际行为很保守
text-transform: capitalize 只把**每个单词首字母转大写**，且仅识别空格、换行、制表符为分词依据，不识别标点、中文、emoji 或连字符后的字母。
例如："hello-world! 你好 world" → "Hello-world! 你好 World"（注意 -world 没被拆开，你好 首字未变）。
立即学习“前端免费学习笔记（深入）”；
- 不会处理缩写词（如
"iOS"会变成"Ios"） - 遇到
- 对带引号的英文（
"apple"）会把引号后第一个字母大写，变成"Apple"，但引号本身不是字母，所以没问题
大小写转换在 CSS 里没有性能问题，但有继承陷阱
text-transform 是一个轻量级渲染属性，不影响重排（reflow），只影响重绘（repaint），性能可以忽略。
真正容易踩坑的是继承逻辑：它会向下穿透到所有子元素，包括 <span></span>、<em></em>、<strong></strong> 等内联元素，除非显式重置。
- 父级设了
text-transform: uppercase，子元素里写<span style="text-transform: none">Pro</span>才能还原 -
text-transform不影响表单控件的value值，只是显示层变化——提交时仍是原始大小写 - 配合
font-variant-caps使用时，优先级关系复杂，建议避免叠加；两者目的不同：text-transform改内容呈现，font-variant-caps调用字体内置的大小写字形（如更协调的 small-caps）
想真正在前端做大小写转换？别只靠 CSS
如果业务需要“用户输入后自动转大写再提交”，或者“搜索时忽略大小写匹配”，text-transform 完全不够用——它只是视觉糖衣，背后数据没变。
这时候得用 JavaScript 的 .toUpperCase() 或 .toLowerCase()，注意语言环境：
- 默认
"İ".toLowerCase()在土耳其语环境下结果是"i"，但英语下是"i̇"（带点），要用.toLowerCase("en-US")显式指定 - 对含 emoji 或组合字符（如 ??）调用
.toUpperCase()可能出错或静默失败，建议先用正则或IntlAPI 判断是否为纯 ASCII 字母 - 服务端永远不要信任前端用
text-transform“伪装”的大小写状态——它可被禁用、绕过、或根本没生效
