1. 字号的基础知识与单位选择
相对单位与绝对单位的对比
在网页设计中，字号决定了文本的可读性与界面层级。绝对单位（如 px）在不同设备上呈现固定像素大小，便于精准控制，但在高DPI屏幕上可能显得过大或过小，降低灵活性。
相对单位则将字号与根元素或父元素的字号相关联，具有更好的可访问性与响应性。相对单位（如 rem、em、%）可以随用户设置或浏览器默认字号变化，从而提升可读性。
在实际开发中，理解这两种单位的差异有助于创建可扩展的排版体系。选择单位时要关注可访问性、响应性与设计一致性。
如何在不同场景选择合适的字号单位
对于全局基准字号，通常推荐使用 root em（rem），以便子元素按统一尺度缩放。
在微调局部组件的大小时，em 可以在父元素基础上逐级缩放，适用于按钮、标签等可控区域。
需要在百分比或 vw/vh 上应用时，谨慎使用，因为这可能导致文本在极端屏幕尺寸下出现意外的换行或溢出。尽量保持浏览器默认字体的可读性。
2. 字体族的选择与回退策略
常用字体族与回退机制
字体族通过 font-family 属性定义，通常以首选字体开始，随后是回退字体，最终落地为通用族。回退策略确保在系统未安装指定字体时仍能呈现可读文本。
一个稳健的字体族声明形如：font-family: "Helvetica Neue", Arial, sans-serif;，其中 Arial 与 sans-serif 作为回退，避免出现空白文本。
另外，若要跨平台统一风格，可引入 Web 字体（如 Google Fonts）并以 可访问性与性能 为前提进行加载优化。
如何选择适合的网络字体与备用字体
在设计中应考虑可读性、字重范围以及渲染一致性，字体权重分布要与设计系统相匹配。
使用变量字体或子集化字体可以显著降低加载时延，同时确保文本在不同浏览器中呈现为同一风格。分担加载压力是提升首屏体验的关键。
请注意：字形覆盖要足够，避免在某些字母或标点上缺字造成用户体验下降。
3. 字体样式的组合：粗细、斜体、变体
字体粗细与斜体的正确定位
字体粗细使用 font-weight，常见取值包括 400（正常）、700（粗体），也可使用 100-900 的渐变值。合理的对比度能提升层级识别。
斜体与倾斜变体应用于强调或特定风格，font-style: italic 是常用实现方式，但要注意在屏幕阅读顺序中的影响。
在设计中，尽量避免在正文中滥用斜体，以免降低可读性；结合 文字结构与语义标签，实现更清晰的排版。
如何在多语言文本中保持一致的字体样式
不同语言的字符集对字体的需求不同，语言特定字体与回退应覆盖常用字符集，避免替换造成字形错位。
对于中文和英文混排，优先考虑支持中英文的字体族，并通过 CSS 做好对齐和行距的调整，确保视觉一致性。
要记得：归一化字体尺度有助于跨语言文本的可读性与美观。
4. 行高、字距与视觉可读性
行高与字距的数值建议
行高（line-height）决定文本行之间的垂直间距，合理的数值通常在 1.4 到 1.8 之间，过窄的行高会使文本密集，过高的行高则可能出现分散感。
字距（letter-spacing）可以微调字母之间的间距，常用单位为 px、em、rem，用于解决同一字体在不同字号下的视觉紧凑度。
段落间距（margin-bottom）也会影响可读性，合理的段前段后间距让内容层级更清晰。
响应式排版中的文本密度调整
在小屏设备上，适度降低字号并增大行高，响应式设计需要通过媒体查询对 font-size 与 line-height 进行断点调整。
使用相对单位时，避免在极端设备上出现字重偏差，保持统一的可读性。测试在多设备上的可读性是关键。
为不同组件设定可控的排版变量，可实现全站风格的一致性与灵活性。设计系统变量化有助于高效迭代。
5. 实战：完整的CSS字体样式实现示例
从网页头部到段落的应用
下面给出一个实战示例，演示如何在全局和局部应用字体样式，包括字号、字体族、行高、字重与回退策略。示例覆盖全局变量、根元素字号、以及组件内的覆盖样式。
该示例展示如何通过 CSS 实现一致且可访问的文本排版，确保在各种浏览器和设备上保持期望的外观。保持可访问性与设计一致性是实现的核心目标。
/* 根变量：全局字号与字体族 */
:root {--base-font-size: 16px; /* 页面基准字号 */--base-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;--heading-font-weight: 700;--text-font-weight: 400;--line-height: 1.6;--letter-spacing: 0.2px;
}html { font-size: var(--base-font-size); }
body {font-family: var(--base-font-family);font-size: 1rem; /* 相对单位：基于根字号 */line-height: var(--line-height);letter-spacing: var(--letter-spacing);color: #333;background: #fff;
}
h2 { font-family: var(--base-font-family); font-weight: var(--heading-font-weight); font-size: 1.5rem; margin-top: 1.5rem; }
p { margin: 0.75em 0; font-size: 1rem; }
/* 细分区块的字体风格 */
.section-title { font-family: "Georgia", serif; font-weight: 700; }
@media (max-width: 768px) {html { font-size: 15px; }:root { --base-font-size: 15px; }h2 { font-size: 1.4rem; }
}
