在网站开发设计领域，字体（Typography）不仅是信息的载体，更是构建品牌调性、引导用户视线和确立视觉层级的重要工具。

以下是一份详尽的网站开发设计字体使用规范，涵盖了从基础选择、排版细节到技术实现的各个方面。

1. 字体家族选择

选择字体时，首要考虑的是可读性、兼容性以及加载性能。

衬线体与无衬线体

• 无衬线体： 现代、简洁、易读，非常适合屏幕显示。
  • 推荐： 苹方 (PingFang SC)、思源黑体 (Source Han Sans)、Roboto、Inter、Helvetica Neue。
  • 适用场景： 正文、UI 界面、移动端网页。
• 衬线体： 传统、优雅、具有人文气息。
  • 推荐： 思源宋体 (Source Han Serif)、Noto Serif SC、Georgia、Playfair Display。
  • 适用场景： 标题、强调文字、艺术类或新闻类网站。

字体栈

为了确保在不同操作系统（Windows, macOS, Android, iOS）上都能良好显示，必须定义合理的字体栈。

/* 推荐的中文字体栈 */
font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

/* 推荐的英文/数字字体栈 (优先使用系统原生字体) */
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

注意： 中文字体文件通常较大（几MB到十几MB），尽量避免直接使用 @font-face 引入完整的中文字体包，除非使用字体切片服务（如 Adobe Fonts 或 Google Fonts 的 subset 功能）。

2. 排版层级

建立清晰的视觉层级是排版的核心。通常采用模块化比例来定义字体大小。

标题层级

建议遵循以下层级结构，保持逻辑清晰：

正文与辅助文本

• 正文： 16px 是目前网页正文的标准大小（最小不建议低于 14px）。行高建议设置为 1.5 到 1.8 之间，以保证阅读的舒适度。
• 辅助文本/标注： 12px - 14px。用于图注、标签、版权信息等。
• 字重： 正文通常使用 Regular (400)，重要信息可使用 Medium (500)。

3. 可读性与间距

良好的排版细节决定了用户的阅读体验。

行长

• 黄金法则： 每行字符数应控制在 45 - 75 个字符（包含空格）之间。
• 原因： 行太长，眼睛换行时容易迷路；行太短，眼睛频繁换行容易疲劳。
• CSS 实现：

  .content {
      max-width: 65ch; /* ch 是基于字符宽度的单位，非常适合控制行长 */
      margin: 0 auto;
  }

行高

• 标题： 1.1 - 1.3（紧凑，显得有力）。
• 正文： 1.5 - 1.8（宽松，易于扫读）。
• 单位： 推荐使用无单位数值（如 1.5），这样行高会随字体大小自动缩放。

字间距与段间距

• 字间距： 默认通常为 0。对于全大写的英文文本，可适当增加字间距（letter-spacing: 0.05em）。
• 段间距： 段落之间的距离应大于行高，通常使用 margin-bottom: 1.5em 或 2em 来区分段落。

4. 颜色与对比度

字体颜色不仅仅是黑色，对比度直接影响无障碍访问。

对比度标准

遵循 WCAG 2.1 标准：

• AA 级（标准）： 普通文本对比度至少为 4.5:1。
• AAA 级（增强）： 普通文本对比度至少为 7:1。

颜色层级

不要使用纯黑，建议使用深灰色系，减少视觉疲劳：

• 主要文本： #333333 或 #1F1F1F (高优先级信息)。
• 次要文本： #666666 或 #595959 (正文、描述)。
• 辅助/禁用文本： #999999 或 #BFBFBF (占位符、不可点击状态)。

5. 响应式排版

字体必须适应不同的屏幕尺寸。

流体排版

使用相对单位（rem, em, vw）而不是固定的 px。

• 根字号： 建议设置 html { font-size: 16px; }，然后在媒体查询中调整。
• 移动端调整： 在小屏幕上，适当减小标题的字号，但尽量不要减小正文字号（移动端正文保持 16px 最佳，防止 iOS 自动缩放）。

/* 示例：桌面端 H1 为 48px，移动端调整为 32px */
h1 {
    font-size: 2rem; /* 32px */
}

@media (min-width: 768px) {
    h1 {
        font-size: 3rem; /* 48px */
    }
}

6. 性能优化

字体文件是影响网页加载速度的重要因素。

• 限制字体数量： 尽量将字体家族控制在 2 种以内（例如一种无衬线体用于正文，一种衬线体用于标题）。
• 限制字重： 仅加载需要的字重（如 Regular 400, Medium 500, Bold 700）。不要加载整个字重家族。
• 使用 font-display: 在 CSS 中定义字体加载策略，防止文字在字体加载期间不可见。

  @font-face {
      font-family: 'MyCustomFont';
      src: url('font.woff2') format('woff2');
      font-display: swap; /* 先显示系统字体，加载完成后切换 */
  }

• 格式选择： 优先使用 WOFF2 格式，它的压缩率最高，体积最小。

7. 中文排版的特殊规范

针对中文环境，需特别注意以下几点：

• 标点挤压： 确保标点符号（如逗号、句号、引号）不出现在行首。
  • CSS 属性：text-spacing (较新) 或通过排版引擎自动处理。
• 避头尾： 某些标点（如左括号、书名号）不应出现在行尾，右括号不应出现在行首。
  • CSS 属性：line-break: strict; 或 line-break: auto;
• 全角与半角：
  • 中文与英文/数字之间：现代排版建议在中文与英文/数字之间保留 1/4 个汉字 的间距（可以使用插件自动处理，或在设计稿中手动调整）。
  • 数字：涉及金额、统计数据时，建议使用等宽数字字体或 font-variant-numeric: tabular-nums; 以保持对齐。