HTML5不提供自动美化文字功能，需靠语义化HTML标签（如p、h1–h6、blockquote）与CSS协同实现可访问、响应式、高性能的中文/英文排版。
HTML5 本身不提供“自动美化文字”的功能，排版美观与否取决于 CSS 控制和语义化 HTML 结构的配合。纯靠 <div> 堆文字、滥用 <font> 或内联样式，反而会让文字难读、难维护、难适配。
用对语义化标签，而不是用 <div> 和 <br> 拼段落
浏览器默认样式对 <p>、<h1>–<h6>、<blockquote>、<cite> 等有合理行高、间距和层级逻辑。手动用 <div> + margin 模拟段落，会丢失语义、影响可访问性（如屏幕阅读器无法识别段落边界），也增加 CSS 覆盖成本。
常见错误现象：中文段落首行无缩进、段间无空隙、标题层级混乱导致 SEO 和大纲解析失败。
- 正文用
<p>，不是<div class="paragraph"> - 小标题用
<h2>～<h6>，按内容层级嵌套，不为“看起来大”而滥用<h1> - 引文用
<blockquote>+<cite>，而非加引号+手调padding-left - 避免
<br>换行控制段落——它只是换行符，不是段落分隔符
行高、字间距、断行必须用 CSS 控制，且优先设相对单位
line-height 决定可读性底线；letter-spacing 对中英文影响不同；word-break / overflow-wrap 影响长串字符（如 URL、代码）是否溢出容器。这些都不能靠 HTML 属性硬编码。
立即学习“前端免费学习笔记（深入）”；
使用场景：移动端窄屏需更大 line-height 防误触；中文字体通常不需要负 letter-spacing；英文技术文档常需 word-break: break-all 防超宽表格列。
-
line-height推荐用无单位数值（如1.6），避免继承链中字体大小变化导致行高错乱 - 中文排版慎用
letter-spacing: 0.05em—— 多数字体在小字号下会显得松散，建议仅用于大标题微调 - 防止中英文混排时英文单词被错误折行：用
word-break: keep-all+overflow-wrap: break-word
字体栈要兼顾可读性、加载性能与 fallback 安全性
直接写 font-family: "Helvetica Neue" 在 Windows 或 Linux 上会回退到不可控字体；全用网络字体（如 Google Fonts）又可能引发 FOIT（Flash of Invisible Text）或布局偏移。
性能影响：每个 @font-face 请求都会阻塞文本渲染，尤其首屏关键文字；未声明 font-display: swap 会导致长时间空白。
- 中文字体栈推荐：
"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif（iOS/macOS/Windows 通用） - 英文字体栈推荐：
system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif - 自定义字体务必加
font-display: swap，并在<link>中用rel="preload"提前加载关键字体 - 避免在
<body>上设过小字体（如12px），iOS Safari 默认最小字号为 16px，强制设小会触发缩放
body {
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
line-height: 1.6;
font-size: 16px;
}
p {
margin-bottom: 1.2em;
letter-spacing: 0;
}
@media (max-width: 768px) {
body {
line-height: 1.7;
}
}
真正难的不是写出漂亮样式，而是让文字在任意设备、任意字号缩放、任意辅助技术下都保持结构清晰、节奏稳定、视觉平衡。那些“看起来很美”的排版，往往在用户放大 200% 或开启高对比度模式后立刻崩解——这才是最常被忽略的点。
