前端网页字体与文字排版

文字是网页的主要信息载体。字体选择、行高、字重、字距和换行方式会影响可读性，也会影响页面加载和布局稳定性。排版规则应同时考虑语言、屏幕尺寸和字体加载过程。

一、建立清楚的字体回退

字体可能没有安装、加载失败或不支持某些字符。字体栈应包含适合目标语言的系统字体回退，保证内容仍然可读。

body {
    font-family: system-ui, sans-serif;
    line-height: 1.6;
}

避免为展示单一视觉效果而强制下载过大的字体文件。只加载实际需要的字重和字符范围，可以降低资源成本。

二、控制行长和行高

正文行长过长会让读者难以回到下一行开头；过短则频繁换行。内容容器可限制最大宽度，行高则应根据字号和字体特征调整。

.article-body {
    max-width: 72ch;
    line-height: 1.75;
}

ch 单位适合控制近似字符行长，但中日韩字体的实际排版宽度会有差异，仍要在目标语言内容下验证。

三、正确处理断行

长英文、编号、代码和用户输入可能超出容器。应针对内容类型选择断行规则：正文允许合理换行，代码块可横向滚动，标识符可按需要断开。

不要全局使用激进断词规则，否则可能破坏专有名词和代码阅读。中文标点还应避免落在行首等不自然情况，交由浏览器排版规则并检查实际效果。

四、管理字体加载引起的布局变化

网络字体加载前后字形宽度可能不同，造成标题换行变化和布局偏移。可以选择度量接近的回退字体，控制字体文件大小，并设置合适的显示策略。

若页面关键区域使用自定义字体，应测量字体加载前后文本尺寸，关注主要内容绘制和布局偏移，而不只是确认字体最终加载成功。

五、图标字体的取舍

图标字体容易受到字形映射、基线、字体回退和辅助技术识别影响。简单图标可以使用内联矢量或 CSS 绘制方式，复杂图标应有明确可访问名称。纯装饰图标应从阅读顺序中隐藏。

六、适配用户偏好

用户可能缩放页面、调整默认字号或使用高对比度设置。不要用固定像素锁死所有文字尺寸，也不要禁用缩放。用相对单位设置字号和间距，检查放大后布局仍能使用。

排版验证清单

• 使用真实的中英文混排、数字、标点和长专有名词检查行高与断行。只用短占位文本会掩盖布局问题。
• 页面缩放和系统字号放大后，正文、按钮和表单标签应仍能完整显示。固定高度文本容器容易裁剪放大后的内容。
• 字体加载失败时检查回退字体的字形覆盖和基线，避免部分字符突然使用差异很大的字体。
• 代码、编号和长标识符应采用有针对性的换行或横向滚动策略，不要让一个长 token 撑宽整页。
• 调整行宽时要结合内容类型。文章正文、数据表和导航栏不应共用同一个最大行长规则。

复核场景

文章页先固定内容最大行宽，再根据正文长度调整行高和段间距；标题、代码和数据表分别设置适合自己的排版规则。若标题使用自定义字体，检查加载前后是否改变换行。页面缩放和中文字体回退后，按钮标签不应截断，正文也不能因行高过小而碰撞。

场景取舍补充

内容型页面要优先优化连续阅读，控制行宽和段落节奏；后台表格则优先保证列标题和数据对齐。不要把文章排版参数直接套到数据密集页面，字体和间距应服从内容任务。

上线检查可记录字体加载失败率和首屏文本偏移；当自定义字体收益有限时，减少字重和字符集通常比增加预加载更有效。

内容密集页面还应检查不同字体粗细下的字形区分和对比度。排版调整与内容编辑一起评审，避免只在空白占位数据上确定字号和行距。

七、字体栈与字重选择

字体栈应按目标语言准备系统回退。一个字体家族可能覆盖拉丁字符却缺少部分汉字或符号，浏览器会为不同字符使用不同字体，造成基线和粗细变化。应使用真实混排内容检查字符覆盖，而非只看字体面板中显示的主字体名称。

声明的 font-weight 要对应真实可用字重。浏览器在缺少某个字重时可能合成粗体，边缘和宽度会与设计不一致。可变字体能够在一个文件中提供连续字重范围，但文件大小和浏览器支持也要纳入评估。

八、行长、行高和文字节奏

正文的最大行宽应以目标语言阅读感受调整，ch 只是近似参考。中文字符与拉丁字母的宽度不同，混排文章还要检查数字、标点和代码。行高太小会让多行内容拥挤，太大则会削弱段落整体关系。

标题、正文、说明文字和代码应建立层级。统一使用同一个字号和间距会使页面缺少信息层次；层级过多又会增加认知负担。通过有限的字号和行高阶梯控制页面节奏。

九、双向文本与动态内容

阿拉伯语、希伯来语和混排数字可能需要方向隔离。用户名、订单编号等动态片段可以使用适当的双向隔离属性，避免标点和数字顺序错乱。长文本要允许合理断行，标识符和代码则应独立决定换行或横向滚动。

十、用户偏好与视觉校验

页面缩放、系统字号、对比度和字体替换都应纳入测试。文本容器避免固定高度；按钮和标签应能容纳放大后的文字。字体资源失败时，回退仍需保证可读和可操作。

实施中的取舍与复核

排版系统需要同时处理字体回退、行高、字距、标题层级和不同语言的断行规则。固定高度文本框在字体替换或用户放大文字时容易裁切，应允许内容增长。中文与拉丁字符混排、数字表格、标点避头尾和代码字体都可能改变行宽，不能只用一段短示例文本验收。

字号使用相对排版尺度有利于整体调整，但要明确移动端和桌面端的阅读层级。正文行长应受合理宽度约束，行高要支持连续阅读；标题过长时可自然换行，不应靠强制单行和省略号隐藏内容。按钮、表单标签和错误提示也要在文字放大后保留完整信息，必要时让操作区换行。

系统字体在不同平台的字形和度量并不完全一致。字体栈应提供可读回退，避免某些常用汉字、数学符号和特殊标点落入意外字体。粗体和斜体缺失时，浏览器可能合成样式；若设计对字重敏感，应实际检查资源是否涵盖所需字重。

验收包括浏览器缩放、操作系统文字放大、窄屏、横屏、打印和长内容。检查内容是否被固定行高剪裁、链接或按钮是否保持可点击、焦点轮廓是否被容器遮挡。排版改动对截图基线影响较大，截图更新应与设计变更一并审查，区分有意调整和意外换行。

复核案例与后续维护

文字内容的可读性优先于视觉紧凑。超长标题允许多行，导航可折叠，数据标签可以提供说明；通过缩小字号硬塞入单行会损害放大和小屏体验。表格数字适合使用等宽数字特性以便对齐，但正文混排仍要验证字体支持和回退效果。

国际化会影响断行和排序。不同语言的空格、标点、方向性和字形覆盖不同，不能只用中文或英文测试布局。双向文本中嵌入数字、代码和用户名称时要隔离方向，避免标点跑到错误位置。日期、货币和数量应由本地化规则格式化，不要依赖字体外观手工添加间距。

文本组件的颜色、行高和字重可以由令牌统一，但实际阅读还取决于行宽、段间距与背景对比。测试浏览器阅读模式、打印样式和系统缩放；如果用户复制或选择正文，视觉装饰不能改变复制出的内容。排版改动应覆盖真实内容样本，而非只使用短占位句。

持续维护要点

跨语言排版回归要使用真实长文案、数字和符号。字体缺字时检查回退链，文字放大后检查控件能否增长，输入错误提示不被裁切。将高频字体和字重集中管理，设计改动更新排版基线时同时核查可读性与布局稳定。

验收补充

排版验收也要关注选择、复制和搜索体验。自定义字形不应让可复制文本包含视觉替换字符，代码与数字应保持可辨识。内容运营使用新字号或字体时抽查长标题与表格，及时调整容器而不是要求编辑者缩短所有文案。

总结

良好排版依赖合适的字体回退、可读的行长与行高、针对内容的断行策略和可控的字体加载。文字布局还应在多语言、缩放和辅助技术环境中验证。