letter-spacing 是唯一能直接精准控制字符水平间距的 CSS 属性，但需注意响应式单位选择（小字号用 em、大标题可用 px）、中英文混排需分别设置、慎用负值、避免在表单元素上使用，并关注 WebFont 加载与浏览器兼容性。
letter-spacing 是唯一能直接、精准控制字符间水平空隙的 CSS 属性，但“动态调整”不等于“随便改”，关键在响应式适配、继承控制和浏览器兼容性——写错单位、忽略 WebFont 加载状态、或在 <input> 上硬套，它就失效。
为什么 letter-spacing 在移动端或小字号下“没反应”
不是代码错了，而是渲染被限制或覆盖：
- 父容器设了
white-space: nowrap且宽度不足 → 字符被挤出视口，DevTools 里能看到 computed 值生效，但人眼看不见 - 用了 WebFont，但字体文件未加载完成，浏览器 fallback 到系统字体（如
SimSun），而系统字体 kerning 表缺失 →letter-spacing只能微调，救不了底子 - 样式被后加载的 CSS 覆盖 → 打开 DevTools 的 Computed 面板，确认
letter-spacing是否 crossed out - 在
<input>或<textarea>上设置 → Safari（尤其 iOS 16–17）对这类表单元素支持极差，Chrome 也仅部分生效，应避免
响应式动态调整该用什么单位
固定 px 值在不同设备上会失衡；无单位值（如 0.1）会被解析为 0.1px，多数浏览器舍入为 0；% 不被规范支持，直接忽略：
- 小字号文本（≤14px），比如移动端正文：用
em，例如letter-spacing: 0.03em—— 它随font-size等比缩放，不会在 12px 下过松、16px 下又看不见 - 大标题（≥24px）：可用
px微调，如letter-spacing: 1.5px，但别超2px，否则易撑破容器 - 全局节奏统一场景：用
rem，但必须确保:root { font-size: 16px; }明确定义，否则动态改根字号时会失控
中英文混排时怎么避免“一边太松、一边太紧”
同一个 letter-spacing 值对汉字和拉丁字母的视觉影响差异极大，强行统一只会让设计稿验收翻车：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 别用
:lang(en)伪类——它依赖 HTML 的lang属性，且对内联英文片段（如按钮里的 “NEW”）常不生效 - 推荐显式包裹：
<span class="lang-en">Contact</span><span class="lang-zh">联系我们</span>，再分别设.lang-en { letter-spacing: 0.05em; }和.lang-zh { letter-spacing: 0.02em; } - 注意继承性：
section { letter-spacing: 0.02em; }会让内部所有<strong>、<i>也带这个值，需主动重置：section strong { letter-spacing: normal; }
负值收紧中文时最容易踩的坑
中文慎用负值，不是不能用，而是临界点极低：
- 12–14px 小字号下，
letter-spacing: -0.5px就可能让“口”“田”类字笔画粘连，iOS Safari 渲染尤其不稳定 - 绝对值如
-2px永远别设——字号越小，粘连越严重，且无法通过媒体查询优雅降级 - 真正需要“紧凑感”时，优先查字体是否支持
font-stretch或可变轴（如 Inter、HarmonyOS Sans），比硬塞负值更可靠 - 若必须用负值，上限建议 ≤
-0.03em，并搭配line-height: 1.6以上，防上下行粘连
真正难调的从来不是写上 letter-spacing，而是它在不同字体、不同字号、不同浏览器下的渲染一致性——尤其是中文字体在 iOS Safari 和 Android Chrome 上的差异，查文档不如开真机多测几遍。
