推荐优先用 em 而非 px，因 em 随 font-size 缩放适配响应式场景；避免用 %；可用 css 变量配合媒体查询实现断点适配；注意 ios safari 渲染缺陷及 webfont 加载问题。
响应式字体间距该用 em 还是 px？
推荐优先用 0.05em～0.1em，而不是固定 px。因为 em 会随 font-size 缩放，而响应式场景下字体本身就在变（比如小屏设 14px，大屏设 20px），用 px 容易在小屏上撑开文字、大屏上又显得太紧。
常见错误是写成 letter-spacing: 2px 后发现移动端文字“飘”了——其实不是 bug，是像素值没跟着缩。
-
letter-spacing: 0.08em是移动端较稳妥的上限（约等于1.2px@16px） - 如果必须用
px，只在明确固定字号的容器里用（比如 banner 标题设死font-size: 24px） - 避免用
%单位，它不按字体大小缩放，行为不可预测
怎么让不同断点下的字间距自动适配？
别靠 JS 动态改样式，直接用媒体查询 + CSS 变量更轻量、可维护。
例如：
:root {
--ls-base: 0.05em;
}
@media (max-width: 768px) {
:root { --ls-base: 0.03em; }
}
@media (min-width: 1200px) {
:root { --ls-base: 0.07em; }
}
h1 {
letter-spacing: var(--ls-base);
}
- 变量名要语义化，比如
--ls-title、--ls-btn，避免全局混用一个--ls-base - 不要在
body上统一设letter-spacing，中文段落、数字、图标都可能被意外拉扯 - Bootstrap 或 Tailwind 用户，别依赖
text-sm类自动带字距，它们默认不处理letter-spacing
为什么 iOS Safari 上字间距看起来糊或错位？
不是你代码写错了，是 WebKit 渲染引擎对小字号 + 非整数像素间距的光栅化处理不稳定，尤其在非 Retina 屏或 zoom ≠ 1 时。
真机测试时容易忽略这点：模拟器里看着正常，iPhone 实机一放大就模糊。
- 避开
letter-spacing小于-0.5px的负值，iOS 上易粘连 - 中文字体慎用
text-transform: uppercase+letter-spacing组合，Safari 对全大写汉字的字距计算有偏差 - 如果用了 WebFont（如 AlibabaPuHuiTi），等字体加载完成后再应用字距，否则 fallback 字体渲染效果不一致
按钮和标题的字间距要不要分开控制？
要，而且必须分开。按钮文字通常短（“提交”“下载”），标题则可能跨行、含标点，需求完全不同。
典型误用是给整个 .btn 类设 letter-spacing: 1px，结果图标字体（比如 <i class="icon-download"></i>）也被拉宽变形。
- 按钮文字用包裹
<span></span>单独控制：<button><i></i><span class="btn-text">下载</span></button> - 标题建议用层级选择器：
h1, h2 { letter-spacing: 0.06em; }，但排除h1 small这类副标题 - 表单控件（
<input>、<textarea></textarea>）原则上不设letter-spacing，部分浏览器不支持或触发重排异常
letter-spacing，效果完全不可控。要么加 @font-face 的 font-display: swap，要么用 document.fonts.load() 做兜底，不能只靠 CSS。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
