老报纸风格排版核心是窄栏密行：column-count 推荐3–4列，配column-gap: 1.5rem；标题图片用break-inside: avoid防断裂；字体选Charter等铅字风，line-height 1.35–1.45；禁用font-smoothing；Safari/Firefox需规避transform和虚线column-rule。
column-count 用多少列才像老报纸
老报纸不是靠“做旧滤镜”骗人，核心是视觉节奏——窄栏、密行、留白克制。现代屏幕宽，column-count: 3 是安全起点；column-count: 4 更接近《纽约时报》1920年代铅印版的实际栏宽比。别硬套 column-count: 2，两栏在14英寸屏上每栏太宽，字行长过65字符，眼睛扫读会累。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
column-count值优先按内容密度调，不是按屏幕尺寸：正文多就用 3–4，引文/注释多可用 2 - 必须配
column-gap: 1.5rem（不能用em，字号缩放时间隙会塌缩） - 避免用
column-width单独控制——它触发浏览器重排更频繁，且在 Safari 里对float元素兼容差
标题和图片怎么不被 column 切断
column-break-inside: avoid 是救命属性，但只对块级元素生效。常见错误是给 <h2> 直接加，结果没用——因为 <h2> 默认是块级，但若父容器用了 display: inline-block 或设置了 float，它就失效了。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有标题、图片、引用块，统一加
break-inside: avoid（column-break-inside已废弃） - 图片必须设
width: 100%，否则可能撑破单栏宽度，导致整列重排 - 如果标题后紧跟
<hr>，<hr>也要加break-inside: avoid，不然横线可能断在栏中间
字体和行高怎么透出“铅字感”
复古不是用衬线体就完事。老报纸用的是高 x-height、紧凑字腔的金属活字，比如 Times New Roman 的原始版本，不是 macOS 自带的 Times。现代系统默认的 font-family: "Times New Roman", serif 在 Chrome 里会被渲染成更圆润的变体，丢失锐利感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
font-family: "Charter", "Noto Serif", "Georgia", serif—— Charter 是专为屏幕优化的铅字风字体，x-height 高，小字号下仍清晰 -
line-height控制在1.35–1.45之间：老报纸行距紧，但太紧（如1.2）会让现代抗锯齿文字糊成一片 - 禁用
font-smoothing: antialiased，它会让笔画边缘发虚；保留系统默认的子像素渲染
Firefox 和 Safari 对 column-layout 的隐藏坑
Firefox 会把 column-rule 渲染成模糊虚线，Safari 则在 transform 容器里完全忽略 column-count。这不是 bug，是它们对多列布局的回退策略不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
column-rule只用纯色 +solid，别碰dashed或width > 1px，Firefox 渲染不可控 - 如果父容器有
perspective或transform: translateZ(0)，Safari 下直接降级为单栏——换用display: grid模拟多列作为降级方案 - 测试时必须开真机 Safari（iOS 16+），模拟器里 column 行为和真机不一致
最易被忽略的点：多列布局下，vertical-align 对内联元素完全失效，连 img 都不能靠它对齐基线。想微调图文位置，得用 margin-top 或 transform: translateY() —— 这个细节改起来快，但漏掉就会让整篇排版“松垮”。
