font-size、line-height、letter-spacing 和 writing-mode 四个 CSS 属性可解决95%文字排版问题；HTML仅负责语义结构，p和h2默认样式因未适配中文字号习惯而显得丑陋，如h2的line-height:1.2导致中文行距过紧，且所有默认值需配合无单位line-height、em单位letter-spacing、vertical-rl加text-orientation等精细调控才能达标。
直接用 font-size、line-height、letter-spacing 和 writing-mode 四个 CSS 属性就能解决 95% 的文字排版问题，HTML 标签本身只负责语义结构，不负责“好看”。
为什么 <p> 和 <h2> 默认看起来很丑
浏览器给 p 加了约 1em 上下外边距，h2 默认 font-size 是 1.5em、line-height 却是 1.2 —— 这个组合在中文段落里会导致行距过紧、ascender（如“b”上伸部）和 descender（如“y”下延部）粘连。更关键的是，所有这些默认值都未适配中文字号习惯。
-
font-size: 16px是正文底线：iOS/Android 浏览器对非 16px 值会强制缩放，破坏你设的line-height比例 -
line-height必须用无单位数值（如1.6），而非24px；否则父元素字号一变，子元素行高就卡死不动 -
letter-spacing: 0.05em比1px更稳——字体放大时它同步缩放，不会让字距突然崩开
writing-mode: vertical-rl 怎么不翻车
竖排不是把横排文字转个 90° 就完事。writing-mode: vertical-rl 会让 margin-top 变成左间距、padding-bottom 变成右填充，而且英文字符默认躺倒排列（比如 “HTML” 显示为 H↵T↵M↵L），必须配 text-orientation: upright 才能直立。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 容器必须设固定
height，否则内容会无限拉长；建议配合overflow: hidden或text-overflow: ellipsis -
line-height: 2在竖排中控制的是“列间距”，不是行高；数值太小会导致汉字上下挨得太近 - IE10–11 不支持
writing-mode，降级方案只能用transform: rotate(90deg)+ 绝对定位，但文本不可选、SEO 失效
text-indent 和 text-align 的中文陷阱
中文段落首行缩进不能靠空格或 ，得用 text-indent: 2em。而 text-align: center 在竖排里其实是垂直居中，text-align: right 反而是顶部对齐——方向逻辑完全反过来了。
立即学习“前端免费学习笔记（深入）”；
-
text-indent不继承，子元素（如strong）不会自动缩进，需单独处理 -
text-align对flex容器内的文字无效，得用justify-content和align-items -
align="center"这类 HTML 属性已废弃，强行使用可能触发 quirks 模式，让 CSS 解析异常
最常被忽略的点是：所有这些属性的生效前提是 HTML 结构干净——p 里别塞 div，ul 下只能是 li，标题层级不能跳级。结构一乱，再精细的 CSS 也会被浏览器自动修正逻辑覆盖掉。
