text-spacing 在移动端基本无效,应改用 letter-spacing 配合媒体查询实现响应式字距控制,优先设 body 基础值 0.02em,小屏提升至 0.04em,并避免负值及表单控件全局应用。

text-spacing 在小屏幕失效怎么办
现代 CSS 的 text-spacing 属性理论上能控制字距,但实际在绝大多数移动端浏览器(包括 Chrome for Android、Safari iOS)中仍为实验性特性,text-spacing: normal 或 text-spacing: loose 几乎不生效,连 getComputedStyle 都读不到值。
别指望它解决问题,目前只能绕行。
用 letter-spacing + 媒体查询做最小安全字距
小屏字距过小,本质是默认字体渲染时字形紧贴、缺乏呼吸感,尤其在 14px–16px 的 UI 字号下,中文连排或中英混排容易糊成一片。直接加 letter-spacing 最可控,但必须配合响应式断点,否则大屏会撑开布局。
- 优先对
body或根容器设基础值:letter-spacing: 0.02em(比0.5px更安全,避免缩放后错位) - 在小屏设备上加量:用
@media (max-width: 480px)提升到letter-spacing: 0.04em - 避免对
input、button等表单控件全局应用——它们的内边距和字体继承容易被干扰,应单独重置 - 注意 WebKit 内核对负值敏感:
letter-spacing: -0.01em在 iOS 上可能触发文字裁切,慎用
font-feature-settings 能微调中文字间距吗
不能。CSS 的 font-feature-settings: "kern" 或 "palt" 主要针对 OpenType 中的西文字母间距(kerning)或日文假名字距(proportional alternate),中文 TTF/OTF 字体极少嵌入对应 GPOS 表,即使写了也基本无反应。
立即学习“前端免费学习笔记(深入)”;
个别定制字体(如思源黑体某些变体)支持 "pwid"(proportional width),但需字体本身提供且浏览器启用,兼容性极差,生产环境不建议依赖。
rem/em 和 viewport 缩放会让 letter-spacing 失效吗
不会失效,但会放大误差。当使用 rem 单位设置 letter-spacing,而根字号(html 的 font-size)又随 viewport 动态变化时,字距会跟着缩放——比如从 16px 缩到 14px,0.04rem 就从 0.64px 变成 0.56px,感知差异变小。
- 推荐统一用
em:它相对当前元素字体大小,更稳定 - 如果必须用
rem,就把根字号固定死(如移除 JS 动态设置或viewport的user-scalable=yes) - 真要兼顾缩放体验,可结合
clamp():letter-spacing: clamp(0.2px, 0.03em, 0.5px),但注意 Safari 15.4 以下不支持
最麻烦的不是加多少字距,而是不同字体的字怀(counter)和字宽差异太大——同样设 0.04em,思源黑体看起来刚好,苹方却可能发虚。上线前一定在真机上用几款主流字体交叉验证。










