文字排版综合应用需以语义化html结构为基础，结合line-height、letter-spacing、word-break等css属性精准控制视觉表现，并依托viewport、rem与clamp()实现响应式，同时通过font-display: swap和合理字体回退链保障加载体验。
文字排版综合应用不是堆砌标签，而是用语义化结构 + 精准样式控制 + 浏览器渲染特性协同工作。核心在于：该用什么标签表达内容本质，再用哪些 CSS 属性去约束其视觉表现，且不破坏可访问性与响应能力。
用对 HTML 标签：语义决定结构基础
排版效果崩坏，八成源于标签误用。比如把标题写成 <div class="title">，屏幕阅读器无法识别层级，SEO 丢失权重，后续 CSS 也难统一控制。
<ul>
<li>标题必须用 <code><h1></h1>–<h6></h6>，且保持逻辑嵌套（<h2></h2> 应是 <h1></h1> 的子节，而非跳级）
<p></p>，别用多个 <br> 模拟换行——后者无语义、无间距控制力、无法被选中或复制整段<ul></ul>/<ol></ol> 内，即使视觉上要“去掉圆点”，也该用 CSS 的 list-style: none，而非改成 <div>
<li>强调文本优先用 <code><em></em>（语义强调）或 <strong></strong>（重要性强调），而非单纯套 <span style="font-weight: bold"></span>
控制行高、字距与断行：CSS 排版三要素
line-height、letter-spacing、word-break 这三个属性组合，直接决定文字是否“呼吸得开”、是否“挤在一起”、是否“在不该断的地方折行”。
-
line-height建议用无单位数值（如1.6），避免固定像素值在缩放或不同字体下失衡；竖排时它控制的是字符上下间距，不是“行”概念 -
letter-spacing对中文字体慎用负值，易造成字粘连；西文小字号下可微调（如-0.02em）提升可读性 - 中文长段落防溢出：用
word-break: break-word或更现代的overflow-wrap: break-word；表格内窄列文字建议加white-space: nowrap+text-overflow: ellipsis
响应式排版的关键：viewport + rem + clamp()
纯用 px 写字号，在手机上要么太小看不清，要么放大后撑破容器。真正可控的响应式排版依赖三层配合。
- HTML 必须有
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端无视 CSS 媒体查询 - 根字体设为
font-size: 16px（或用rem基准），所有字号用rem表达，便于 JS 动态调节 - 现代方案直接用
font-size: clamp(1rem, 4vw, 1.5rem)：最小 1rem，最大 1.5rem，中间随视口宽度线性过渡，比媒体查询更简洁
容易被忽略的细节：字体加载、fallback 与渲染触发
字体没加载完就渲染，会先闪现系统默认字体（FOUT），再跳变成目标字体（FOIT）。这不仅影响体验，还可能让行高重算导致布局抖动。
- 用
@font-face时务必声明font-display: swap，确保文字立即以 fallback 字体显示，等自定义字体加载完成再替换 - 中文字体 fallback 链要写全：
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif；避免只写"SimSun"这种老旧字体 - 修改
font-size或line-height可能触发 layout，若在滚动中频繁变更（如视差排版），需用transform: scale()替代，仅触发布局
