letter-spacing用于控制字符间距，word-spacing仅影响单词间隔且对中文无效；推荐用em单位并避免小字号滥用，响应式中宜用calc()绑定字号自适应。
用 letter-spacing 控制字符间距，不是 word-spacing
HTML5 本身不提供设置文字间距的标签或属性，真正起作用的是 CSS 的 letter-spacing。很多人误用 word-spacing（它只调单词间空隙），结果发现中文没反应、英文也不对劲——因为中文没有“单词间隔”概念，word-spacing 对它基本无效。
实操建议：
-
letter-spacing接受px、em、rem、normal值，推荐优先用em（相对字体大小，缩放时更稳） - 负值合法，但别设太小（比如
-0.2em以上），否则字会粘连、可读性崩塌 - 对行内元素（如
<span></span>）直接生效；块级元素（如<p></p>）也支持，但会影响整段 - 注意：iOS Safari 旧版本对小数
em值渲染有微小偏差，若需像素级精准，可补px回退
中文排版慎用 letter-spacing，尤其小字号
中文字体设计默认已优化字间留白，强行加 letter-spacing 容易让文本发虚、节奏断裂。这不是 bug，是字体排印逻辑决定的。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 14px 或更小字号下设
letter-spacing: 0.1em，文字像被拉散，识别变慢 - 在
font-feature-settings: "kern"关闭的环境下，加间距反而放大字形不匹配问题 - 配合
text-rendering: optimizeLegibility使用时，浏览器可能忽略你的letter-spacing
使用场景建议：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 仅限标题、按钮文字等大字号强强调场景
- 做视觉呼吸感时，优先考虑增大
line-height或左右padding，比动字符间距更安全
响应式中怎么让 letter-spacing 自适应？
不能靠媒体查询硬切多个固定值——屏幕尺寸连续变化，断点容易露馅。要用相对单位 + CSS 自定义属性联动。
实操建议：
- 把字号和间距绑定：用
calc(1rem * 0.04)这类表达式，让间距随font-size线性变化 - 用
@container（现代浏览器）替代媒体查询，按容器宽度动态调整，更贴合实际布局 - 避免在
@keyframes中动画letter-spacing：重排开销大，低端机易掉帧
示例（简洁写法）：
.title { font-size: clamp(1.5rem, 4vw, 3rem); letter-spacing: calc(1rem * 0.03); }
遇到 letter-spacing 不生效？先查这三处
不是所有元素都老老实实听这个属性的话。最常卡壳的地方其实跟 HTML 结构和继承规则有关。
排查顺序：
- 父元素是否设了
font-family？某些字体（如系统默认system-ui）对letter-spacing支持弱，换"Segoe UI", sans-serif立刻见效 - 目标元素是否被
transform: scale()或zoom干扰？这类变形会覆盖字符间距计算，优先改用font-size缩放 - CSS 优先级是否被覆盖？检查 computed 样式里
letter-spacing是否显示为normal却没生效——可能是被all: unset或revert重置了
复杂点在于：同一个 letter-spacing 值，在不同字体、不同字号、不同浏览器渲染引擎下，视觉效果差异可能比你预想的大。别迷信数值，打开 DevTools 拖着滑块实时看，比查文档管用。
