CSS如何设置文字的字间距与行高_利用letter-spacing与line-height属性
设置letter-spacing为负值容易导致文字重叠，中文场景下建议不超过-0.05em，英文则不超过-0.1em；line-height属性应优先采用无单位数值（例如1.5），避免使用px或%导致嵌套元素行高失控；当二者共同使用时，line-height决定着行高，而字间距仅影响单行内文字的宽度。
免费影视、动漫、音乐、游戏、小说资源长期稳定更新！ 👉 点此立即查看 👈
letter-spacing设负值时文字会重叠，但不是所有场景都适合
字间距属性 letter-spacing 的默认值是 normal。当你赋予它正值时，文字会被拉宽；给负值，则会向内压缩。但是，负值给得太“狠”——比如 letter-spacing: -0.2em——中文就很可能粘连成一团，英文中的连字（像 “fi”、“fl”）也可能被意外截断。这里还有个浏览器差异：Webkit内核（比如Chrome）对负值的渲染通常比Firefox更“激进”，同样的数值在不同浏览器里看起来可能完全是两个样子。
那么，实际工作中该怎么把握呢？给你几条建议：
- 中文排版要格外小心负值，控制在 -0.05em 以内比较安全；英文可以放宽到 -0.1em，但务必人工检查首尾字母有没有被裁切。
- 尽量避免在
button或input这类有默认字体缩放逻辑的控件上直接设置letter-spacing，很容易触发iOS Safari的自动缩放干预，搞乱你的布局。 - 在做响应式设计时，别用固定像素值（比如
letter-spacing: -1px），改用em或rem。否则，在小屏幕下挤压效应会成倍放大，效果惨不忍睹。
line-height设为无单位数值最稳妥，别用px或%
把 line-height 设成诸如 1.5 这样的无单位数字，是最聪明的做法。它会根据当前元素的字体大小动态计算行高，子元素继承时，也是基于自身的字号重新计算。反之，如果写成 line-height: 24px（绝对值）或 line-height: 150%（相对父元素），子元素会直接继承这个计算结果，导致嵌套的文本行高完全失控。
你可以想象这么一个典型的错误场景：
立即学习“前端免费学习笔记（深入）”；
- 标题用了
font-size: 2rem配合line-height: 24px，而正文的font-size: 1rem直接继承了那 24px 的行高，最终行高比字号本身还大，版面显得极其松散。 - 以为
line-height: 100%能让文字“紧紧贴合”？这其实等于font-size的100%。但汉字字身高度通常只占字号的70%到80%，所以视觉上依然显得拥挤不堪。
这里有几个经验值供参考：正文行高建议在 1.5 到 1.6 之间；标题可以紧凑些，用 1.2 到 1.3；如果是超小字号的场景（比如12px的图标辅助文字），行高至少设为 1.3，才能有效防止上下行文字重叠。
letter-spacing和line-height同时使用时，line-height优先级更高
这是个关键原则：当 letter-spacing 把文字横向拉伸之后，行框（line box）的高度仍然由 line-height 一锤定音。换句话说，字间距只管一行之内文字的宽度，而行高才决定了行与行之间的“呼吸空间”。如果 line-height 太小，哪怕你把字间距调得再宽，也救不回那局促的行间距离。
看看这些容易踩坑的地方：
- 导航菜单的文字加了
letter-spacing: 0.1em显得很精致，但line-height却还是默认的 1。结果鼠标悬停时，下划线几乎紧贴着文字底部，视觉效果非常割裂。 - 卡片标题用了大字号配合大字间距来营造气势，却忘了同步调高
line-height，导致文字上下方的内边距（padding）被“顶穿”，内容溢出容器。
解决方法其实很简单：务必先确定好 line-height，保障基本的行间韵律，再去微调 letter-spacing 来优化字与字的节奏感。这个顺序绝对不能颠倒。
移动端iOS Safari对letter-spacing有渲染延迟
在 iOS 的 Safari 浏览器里，动态修改 letter-spacing（例如通过 Ja vaScript 切换 CSS 类名）时，经常会遇到一个烦人的闪动问题：页面会先用默认间距渲染文字，然后才突然“跳”成你设定的间距。这并非 bug，而是 WebKit 引擎对字符度量（glyph metrics）采取的一种懒加载策略。
虽然无法根治，但有一些行之有效的绕行方法：
- 给相关元素加上
transform: translateZ(0)来强制开启 GPU 加速，这能缓解大部分机型上的跳变&现象。 - 尽量避免在
:hover伪类或@media媒体查询里让letter-spacing发生突变。改用transition: letter-spacing 0.2s添加一个短暂的过渡效果，能让变化柔和许多。 - 如果项目要求零延迟，更稳妥的办法是：提前在 CSS 里定义好两套完整的样式类，通过切换
display或visibility来控制显示，而不是去实时修改letter-spacing属性。
最后需要提醒的是，这件事没有一劳永逸的解决方案。尤其是当中文字体繁多、字重复杂的项目，几乎每一种字体和属性的组合，都需要在真实设备上测试一遍才能放心。
相关攻略
CSS颜色格式选型：Hex、RGB与HSL的性能与协作权衡 在CSS中定义颜色，看似简单，背后却有一系列格式选择： RRGGBB、rgb()、hsl()。每种格式都有其特定的适用场景和潜在的“坑”。选对了，代码简洁高效，团队协作顺畅；选错了，可能带来兼容性问题、维护困难，甚至微小的性能损耗。那么，究
BEM修饰符比CSS类名拼接更可靠，因其通过语义解耦实现可维护性：btn--primary明确表达按钮变体而非新组件，支持统一基础样式更新；修饰符需双连字符、作用于所属块、避免状态堆叠，应与伪类分工管控交互态，子元素响应变体须显式限定，自定义属性仅用于动态值且须大小写一致。 为什么 BEM 修饰符比
CSS盒模型：用box-sizing: border-box告别布局“惊喜” box-sizing: border-box 是什么，为什么需要它 简单来说，它重新定义了width和height的管辖范围。在默认的content-box模式下，你设定的宽度仅仅指内容区域的宽度。一旦加上padding和
CSS中BEM命名为什么比传统命名好维护：探究长类名带来的可读性提升 话说回来，在CSS的世界里，命名约定一直是个让人头疼的问题。传统方式下，那些看似简洁的 header、 btn，一旦项目规模膨胀，就会在各个角落反复出现。结果呢？想定位一个按钮的样式，可能得翻遍好几个CSS文件，像是在玩一场没有地
如何让Bootstrap导航条在滚动后改变颜色：结合CSS过渡与JS类名切换 想让导航条在滚动时优雅地改变颜色，核心思路其实很清晰：监听滚动，判断导航条是否“过顶”，然后切换一个控制样式的类名。说起来简单，但里面有几个关键细节，处理不好要么效果生硬，要么性能堪忧，甚至在移动端直接失效。下面就来拆解一
热门专题
热门推荐
红色沙漠腾空刺击稳定触发方法 想在《红色沙漠》里稳定打出帅气的腾空刺击吗？这个技能的关键，在于精准把握那个“完全浮空”的瞬间。简单说，就是在二段跳的最高点，角色身体还在空中、没有任何落地趋势时，按下Shift+右键（PC）或对应的手柄键位。下面这几种方法，能帮你把成功率拉到最高。 基础稳法 这套操作
红色沙漠疾风斩观摩位置介绍 想在《红色沙漠》里耍出帅气的疾风斩，第一步不是急着去点技能，而是先“看会了”。这就好比学书法，总得先看看名家是怎么运笔的。游戏里提供了非常直观的观摩机会，让你能把释放时机和节奏看得清清楚楚。 疾风斩观摩位置 核心观摩点就在主城埃尔南德。具体位置，是城东北侧的警卫队训练场，
《杀戮尖塔2》中的战术基石：计划妥帖状态详解 在《杀戮尖塔2》的复杂战局中，手牌管理往往是决定胜负的关键。而“计划妥帖”这个可叠加的状态，正是为此而生的核心机制。简单来说，它允许你在每回合结束时，将指定数量的关键卡牌“扣在手里”，带入下一回合。这为那些依赖特定卡牌组合、需要精准规划跨回合战术的构筑，
解放《红色沙漠》恺利恩采石场：从清场到斩首的完整战术指南 面对恺利恩采石场那根顽固的100%占领进度条，很多人的第一反应是埋头清怪。但经验告诉我们，和无穷无尽的小兵硬耗，效率实在太低。真正的突破口，在于那三个带着醒目红色标记的关键建筑。拆掉它们，整个战场的难度会陡然降低。 红色沙漠恺利恩采石场解放方
山寨币如何快速查询市场深度与挂单情况？ 对于山寨币交易而言，市场深度与挂单情况绝非可有可无的背景信息，它们直接决定了你交易的滑点大小、成交效率乃至买卖时机。尤其是在那些成交量偏小或波动剧烈的代币上，能否快速读懂订单簿和深度图，几乎成了区分普通玩家与精明交易者的分水岭。接下来，我们就来梳理几种高效的查