排版

Web 功能： font-size rem em 单位 line-height overflow-wrap text-wrap text-wrap: balance text-wrap: pretty min()、max() 和 clamp() 视口单位

总体最佳实践

  • 为 line-height 使用不带单位的数字（例如 1.5），以确保在字体大小继承期间进行相对缩放。
  • 使用 overflow-wrap: break-word（或 anywhere）来包含长网址。
  • 请勿将 px 用于 font-size。最好使用 rem 来遵循用户的浏览器字体大小偏好设置（根字体大小），或使用 em/百分比来设置上下文大小。

可读性

  • 避免长行文本：将段落块的宽度限制在 80 个字符以内。
  • 避免出现空白区域：避免使用 text-align: justify，因为它可能会使文本更难阅读。如果必须使用，请将其与 hyphens: auto 结合使用，以避免字词之间出现过多空格。
  • 不要使用华丽的字体：主要阅读内容不要使用草书字体。
  • 不要依赖全部大写来强调：最好使用粗体来强调视觉效果，并在强调语义时使用 <em>/<strong>。
  • 限制整体强调：如果到处都是强调，强调就会失去意义。请仅在需要改变内容阅读方式的地方使用强调。
  • 支持用户缩放偏好设置：允许用户将文字大小调整至最多 200%，而不会丢失内容或功能。
body {
  line-height: 1.5;
  text-align: start; /* Supports LTR and RTL */
}
article {
  max-width: 80ch; /* Caps line length to ~80 characters for readability */
}

文本换行

  • 使用 text-wrap: balance 呈现平衡的标题和类似标题的内容（例如 <th>）
  • 将 text-wrap: pretty 用于长篇正文（段落、引用块等）
  • 请谨慎使用 text-wrap: balance 或 text-wrap: pretty，请勿将其应用于 *，因为这会产生性能开销。
  • 避免在具有可见框（背景、边框、阴影等）的元素上使用 text-wrap: balance，因为它不会改变容器的宽度，只会影响文本在该宽度内的文本换行方式。这可能会在容器末尾留下空白空间，这通常是不希望出现的情况。

自适应排版

  • 务必在 clamp() 中结合使用视口相对单位和字体相对单位，以便字体大小随视口大小缩放，同时确保其保持在所需范围内。例如 clamp(2rem, 1rem + 5vw, 4rem)。调整视口相对单位和字体相对单位的比例，以控制字体大小的变化速度。
  • 请勿单独使用 vw 来设置字体大小而不使用 clamp()，因为这可能会导致文本在极端屏幕上缩放得过小或过大。