直接用 1.5 更安全,因 1.5em 会继承父元素 font-size 叠加放大,导致嵌套时行高失控;1.5 是无单位值,按自身字号计算,稳定兼容。

line-height 设置为 1.5 和 1.5em 哪个更安全?
直接用 1.5,别用 1.5em。后者会继承父元素的 font-size 再乘,导致嵌套时行高层层放大,比如在 <blockquote></blockquote> 或 <li> 里突然变高。
常见错误现象: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,比正文稍紧,强化层级关系 - 列表项(
<li>)内部段落建议取消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,设了也无效,纯属冗余代码










