Web 排版中的字体、行高和布局稳定性怎样处理？

简答

字体栈按顺序查找字形，中文、Emoji 等可能来自不同的回退字体。
lang 帮助浏览器选择断词、引号和字形规则，要与实际文本语言一致。
无单位 line-height 随元素字号计算，比固定像素更能适应文字放大。
Web 字体加载要在文字尽早可见和布局稳定之间取舍，具体策略见字体加载那道题。

同一段标题换一种字体后，可能从一行变成两行，卡片高度改变，下面的按钮整体下移；字体迟到时，用户还会先看到后备字体，再看到文字重新排版。排版问题同时影响可读性、性能和 CLS，不能只靠把 font-size 调小来修复。

字体家族不是一定能提供所有字形

CSS

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

字体栈按顺序寻找可用字体；不同字体覆盖的 Unicode 范围不同，中文、阿拉伯文、Emoji 和数学符号可能来自不同回退字体。回退字体的字宽、基线和行高不一定相同，不能只在一台机器上判断标题永远不会换行。

lang 属性帮助浏览器和辅助技术选择语言规则，也可能影响断词、引号和连字符：

HTML

<html lang="zh-CN">
  <p lang="en">A long English paragraph can wrap differently.</p>
</html>

语言标签不是翻译，也不是权限标记；动态切换语言时，文档和局部内容的语言都要与实际文本一致。

line-height 要表达阅读节奏

无单位 line-height: 1.6 会随元素自己的字体大小计算，通常比固定像素更容易适应组件和文字放大。固定高度的标题或按钮如果依赖文字不换行，遇到长翻译、系统字体放大和不同字体度量就可能裁剪内容。

行高过小会让相邻行难以区分，过大又会破坏段落节奏。可读性应按正文、标题、表单和表格分别设计，不能用一套数值覆盖所有文本。vertical-align、内联盒和图标基线也可能影响行框，出现图标上下跳动时要检查实际字体和盒模型，而不是只改 margin。

Web 字体加载要在性能和稳定性之间取舍

font-display 的各个取值、字体交换引起的布局偏移，以及字体 preload 的写法，见“font-display 怎样影响字体加载期间的文字显示？”。这里只补充资源组织：unicode-range 可以拆分字符集，但分片太多会增加请求；字体授权、子集化和缓存策略要与发布流程一致。

不要把大图标字体当成所有图标的默认方案。SVG、图标组件和文本图标各有无障碍与加载边界；图标字体缺失时可能显示错误字符，操作按钮还需要真实的可访问名称。

换行和断词必须尊重语言与数据类型

长 URL、邮箱、哈希和代码行可能没有自然空格。overflow-wrap: anywhere 可以防止它撑破容器，但也可能在不理想的位置断开；正文语言则应优先使用自然断词、word-break 和 hyphens 的合适组合。

CSS

.article {
  overflow-wrap: break-word;
  hyphens: auto;
}

.code,
.url {
  overflow-wrap: anywhere;
}

CSS 属性的支持与语言规则相关，浏览器不能凭 hyphens: auto 自动理解所有语言。代码和 URL 还要考虑复制、选择和读屏体验，不能为了避免横向滚动把内容切成用户无法重组的片段。

可变字体提供连续轴，也带来资源和设计成本

可变字体可以在一个文件中提供重量、宽度或光学大小等轴，减少多个静态字体文件的重复，但文件仍可能很大，且不同字体的轴支持不同。font-weight: 350 只有在字体提供相应轴或浏览器能够合理插值时才有意义。

标准轴应优先用 font-weight、font-stretch（font-width）、font-style 和 font-optical-sizing 控制。font-variation-settings 是低层属性：它整体覆盖而不是按轴合并，子元素只改一个轴时，父级设置的其他轴会被重置；它还会覆盖对应高层属性的值。只为一个标题引入完整可变字体，可能比使用系统字体或合适子集更昂贵。

字体改变后要检查布局和交互

字体加载、语言切换和文字放大都可能改变高度。应为图片、卡片和固定操作预留合理空间，避免文字出现后覆盖按钮；读取尺寸或滚动定位时，要等待字体和必要资源就绪，不能在默认字体阶段测一次就永久缓存。

验收应覆盖冷缓存、慢网络、字体失败、系统放大、深色/高对比模式、长翻译、中文英文混排、阿拉伯文 RTL 和打印。性能面板检查字体请求、文本布局和 CLS，读屏器检查名称和语言，最终目标是文字可读、可复制、可操作且不会因为字体到达顺序破坏页面。