CSS布局：文章字体与间距优化技巧

本文深入剖析了CSS文章排版中三大关键细节：行高设置应优先选用无单位值1.5而非1.5em，以避免嵌套时字体继承导致的失控放大；中文字体名必须用英文双引号包裹，确保跨平台（尤其Windows/macOS及各类WebView）准确解析；段落间距推荐使用相对单位em（如正文margin-bottom: 1.2em），兼顾视觉节奏与响应式缩放稳定性；同时揭露Safari中文字体发虚的元凶是错误启用-webkit-font-smoothing，并强调真实设备调试不可替代——参数易查，而多端、多场景下的实际渲染一致性，才是专业排版真正的分水岭。

line-height 设置为 1.5 和 1.5em 哪个更安全？

直接用 1.5，别用 1.5em。后者会继承父元素的 font-size 再乘，导致嵌套时行高层层放大，比如在

或

里突然变高。

常见错误现象：line-height: 1.5em 在标题 + 正文混排时，小字号标题行高反而比正文还大；line-height: 1.5 是无单位数值，浏览器按当前元素自身 font-size 计算，稳定可控。

• 1.5 是推荐值：兼顾可读性与兼容性，所有现代浏览器和 IE9+ 都支持
• 避免 px 值（如 24px）：字体缩放或响应式切换时行高无法自适应
• 若需微调段落内紧凑感，可用 line-height: 1.45，但别低于 1.4，否则中文易粘连

font-family 中中文字体名要不要加引号？

Windows 下的 "Microsoft YaHei"、"SimSun" 必须加英文双引号；macOS 的 "PingFang SC"、"Hiragino Sans GB" 同理。不加引号，遇到空格或特殊字符，浏览器会截断识别为 PingFang，直接 fallback 到下一个字体。

使用场景：多端兼容排版，尤其微信公众号、钉钉等内嵌 WebView 对字体解析更严格。

• 英文无空格字体（如 Helvetica、Arial）可不加引号，但统一加更省心
• 不要写 font-family: "Microsoft YaHei", "Helvetica Neue", sans-serif; 这种混合中英引号风格，全用英文双引号
• 避免用系统未预装字体名（如 "HarmonyOS Sans"），没安装就回退失败，建议放在最后

margin-bottom 多大才不会让段落看起来“太松”？

正文段落用 margin-bottom: 1.2em 起步最稳妥。这个值是基于 line-height: 1.5 的视觉节奏推导出来的——既留出呼吸感，又不让段与段之间断层感过强。

容易踩的坑：用固定 px（如 20px）导致字号缩放后间距失衡；或盲目跟风设 margin-bottom: 0，结果段落挤在一起，阅读时找不到段落边界。

• 标题下方用 margin-bottom: 0.8em，比正文稍紧，强化层级关系
• 列表项（
• ）内部段落建议取消 margin-bottom，改用 padding-bottom 控制内部间距，避免 margin 折叠干扰
• 如果用了 CSS Reset（如 normalize.css），检查是否清除了 p 默认 margin，很多重置会设成 0，得手动补上

为什么 Safari 下中文字体偶尔发虚、行高忽高忽低？

大概率是启用了 -webkit-font-smoothing: antialiased。这个设置会让 Safari 强制走灰度抗锯齿，对中文字体渲染特别不友好，字形变细、笔画发虚，连带行高计算也轻微浮动。

性能影响不大，但视觉一致性崩了。macOS 系统级字体渲染本就依赖 subpixel rendering，关掉它等于放弃最优路径。

• 删掉所有 -webkit-font-smoothing 相关声明，让它用默认的 subpixel-antialiased
• 如真需控制字体平滑（比如深色背景上白字），优先试 text-rendering: optimizeLegibility，副作用小得多
• 注意：iOS Safari 不支持 font-smooth，设了也无效，纯属冗余代码

事情说清了就结束。字体排版真正难的不是参数本身，而是同一套 CSS 在不同系统、不同缩放比例、不同输入法候选框遮挡下的实际表现——这些没法靠文档查到，只能在真机上反复点开开发者工具调。

以上就是《CSS布局：文章字体与间距优化技巧》的详细内容，更多关于的资料请关注golang学习网公众号！

您即将跳转至第三方网站，请注意保护好个人信息和财产安全！

继续访问