如何设置文字字间距_LETTER-SPACING属性调整视觉疏密-html教程-PHP中文网

letter-spacing 是统一调节字符框间空白的排版属性，非逐字控制；它影响所有字符框右缘间距，单位需按场景选em/rem避免失效，误用易致中文粘连、英文断裂、iOS闪动。

如何设置文字字间距_letter-spacing属性调整视觉疏密

letter-spacing 不是“逐字符控制工具”，而是统一调节字符框之间空白的排版属性；设对值能立刻提升标题呼吸感，设错值反而让中文粘连、英文缩略词断裂、iOS 上闪动跳变。

它在每个字符的渲染框右边缘统一插入或扣除空间，所有相邻字符（汉字、英文字母、数字、标点、空格）都受控。这意味着：

中文标题 “联系我们” 加了 letter-spacing: 0.04em，效果是 “联|系|我|们”，而非只调“联”和“系”之间
英文缩略词如 W3C 会被拆成 W|3|C，视觉上断裂——这不是 bug，是预期行为
负值如 letter-spacing: -0.05em 在 14px 中文下已接近笔画粘连临界点，小字号慎用
该属性具有继承性：section { letter-spacing: 0.02em; } 会让内部所有 span、em 也带这个值，除非显式重置为 normal

单位决定间距是否随上下文缩放，直接影响多端表现：

px 固定不变：在 Retina 屏上可能过细，在用户放大字体时无法跟随，仅适合极少数需绝对锁定的场景（如图标字体对齐）
em 基于当前元素 font-size：适合标题微调，例如 h1 { font-size: 2.5rem; letter-spacing: 0.03em; }，字号变大时间距自动放大，保持比例协调
rem 基于根元素 font-size：适合全局节奏统一，但必须确保 :root { font-size: 16px; } 明确定义，否则在动态修改根字号的项目中会失准
避免用 pt、mm：屏幕渲染中无实际意义，仅在 print stylesheet 中偶有用途

很多人拿 letter-spacing 解决它本不负责的问题，结果引入新问题：

想让 text-transform: uppercase 的英文标题更舒展 → 实际应优先启用 font-kerning: normal + 使用自带 kern 表的 WebFont，letter-spacing 只作轻量补偿（≤ 0.05em）
中文按钮文字被撑出容器 → 检查父级是否设置了 letter-spacing，并在按钮内加 letter-spacing: normal 主动重置
JS 切换 class 动态改 letter-spacing，iOS Safari 首次渲染闪动 → 加 transition: letter-spacing 0.2s ease 缓解，或改用 transform: translateX() 模拟（注意语义损失）
设计稿要求 “AV”、“To” 特定字母对收紧 → letter-spacing 无能为力，需用零宽空格 + span 包裹单独控制，或依赖字体本身的 kerning 支持

小屏、小字号对字间距更敏感，稍不注意就破坏可读性：

≤18px 标题建议用 em 单位，例如 letter-spacing: 0.03em；固定 2px 在 iPhone SE 上会显得过松
全角中文标点（，。！？）同样被拉伸，调整后务必检查标点位置是否突兀，必要时用 span 单独包裹并重置
搭配 line-height 使用：加大 letter-spacing 后单行宽度增加，若容器宽度固定，可能触发换行；此时需同步检查 line-height 是否仍足够容纳新宽度
iOS Safari 对 letter-spacing 动画支持不稳定，首次渲染易跳变，生产环境建议避免直接动画该属性