字体搭配实战：标题 + 正文 + 强调 三角原则

Serif（衬线体）：笔画末端有装饰小脚。例如 Georgia、Times New Roman（英文），思源宋体（中文）。特点：正式、传统、高端、易于纸质阅读。最常用于报纸、书籍、法律文件标题。屏幕上小字号时可能显得模糊（因为衬线细小），所以网页通常只在标题用。

Sans-serif（无衬线体）：笔画末端无装饰。例如 Helvetica、Arial（英文），思源黑体（中文）。特点：现代、简洁、易读、亲近。1950 年代后的现代设计主流。屏幕显示效果好，是网页正文的首选。

Display（花体 / 展示体）：艺术性强，用于特殊场景。例如 Playfair Display（优雅）、Fredoka One（可爱）、Bebas Neue（粗壮）。特点：视觉冲击强，不适合长文本，只用于标题或品牌名。一页不超过 1 种。

Monospace（等宽体）：每个字符宽度相同。例如 Courier New、Monaco（英文），思源等宽（中文）。特点：用于代码显示、终端、数据表格。字符对齐，适合技术内容。不应在正文用。

设计法则叫「对比产生秩序」。标题和正文用同一字体时，需要靠字号和字重区分，费力。但如果标题用衬线（正式），正文用无衬线（现代），视觉秩序立刻清晰——用户一眼就懂两者不同。

经典搭配示例：

标题：Playfair Display（高端衬线花体）或 Georgia（经典衬线），正文：Open Sans（舒适无衬线）。美观且专业，常见于出版物和博客。

标题：Montserrat（粗壮无衬线），正文：Lora（温暖衬线），强调：Monaco（代码等宽）。现代感强，适合科技博客。

为什么这样搭：衬线在屏幕小字号时显得模糊，但大标题时显得高端。无衬线小字号清晰，长文本舒适。两者结合既有视觉对比又有功能互补。

避免的搭配：两个衬线（显得拥挤）、两个无衬线（无对比感，除非字族内采用不同字重）、衬线 + 花体（过度装饰）。

字重（Font Weight）从细到粗通常有：Light(300)、Regular(400)、Medium(500)、Semi-Bold(600)、Bold(700)、Extra-Bold(800)、Black(900)。高级字族（如 Inter、Roboto）提供全系列；廉价或网络字体可能只有 Regular 和 Bold。

秩序原则：

主标题（H1）用 Black 或 Bold，字号 32px+。次标题（H2）用 Semi-Bold，字号 24px。正文用 Regular，字号 16px。辅助文字（时间、分类）用 Light，字号 12-14px。

不要跳级。例如正文 400，强调突然用 900 会显得突兀；改用 600-700 过渡效果更自然。

中文字体的字重陷阱：中文字体不像英文字体有那么多细分。思源黑体只有 Light、Regular、Medium、Bold、Heavy 5 级；老旧中文字体可能只有 Regular。确认字体支持的字重后再做规划。

行高（Line Height）是行与行之间的距离。太小显得压抑，太大显得松散。规则因内容而异：

正文（长篇文章）：行高 1.5-1.75 倍字号。字号 16px 时，设行高 24-28px（line-height: 1.5 或 1.75）。这是眼睛长距离阅读最舒适的距离。

标题：行高 1.2-1.3。字号越大的标题可用越小的行高。32px 标题用 1.2，40px 用 1.1 都可以。

代码块：行高 1.4-1.5。代码对齐敏感，不能太紧凑。

字号与行长的关系：行长（每行字符数）也影响舒适度。英文推荐每行 45-75 个字符；中文因为笔画复杂推荐 30-50 个。行长太长需配合较大行高；行长短的地方可降低行高。

快速检查：用浏览器开发者工具查看 line-height 属性。如果没有显式设置，通常默认 1.0-1.2，太小了。

陷阱 1：中英字号差异。中文字和英文字相同像素高度时，英文显得很小。原因是中文字是正方形框架，而英文在那个框里只占一部分。解决：英文字号比中文大 10-20%。例如中文 16px，英文用 18-20px。

陷阱 2：中英基线不对齐。中文以方形底部对齐，英文以 baseline 对齐（英文 g 等字有下沉）。混排时显得不整齐。解决：用 CSS vertical-align: baseline 或选用设计时考虑中英搭配的字体对（如思源黑体 + Inter）。

陷阱 3：空格与标点。中英混排时，英文单词前后应加空格（「这是 English 单词」）；但中文与标点通常不加空格（「这是，例子。」）。不一致会显得低级。坚持一个规范（推荐：中文不加空格，中英之间加空格）。

陷阱 4：字体搭配不当。思源宋体 + Times New Roman 看似都是衬线，但设计风格迥异，混排显得割裂。推荐搭配：思源黑体 + Inter（都是现代无衬线）；思源宋体 + Crimson Text（都是古典衬线）。

陷阱 5：行高不一致。中文 line-height: 1.6，英文 line-height: 1.5，混合文本时视觉层级混乱。保持统一：整段用 1.5-1.6。

最佳实践：中英混排时用专业工具（如 font-feature-settings: "kern" 启用 kerning，或用 CSS Grid 精细控制）。或直接选用对中英都考虑好的字体系统（思源 + Noto Serif / Noto Sans）。

Google Fonts 官方库 (fonts.googleapis.com) 在中国大陆被屏蔽，加载会超时。解决方案有三：

方案 1：国内镜像（推荐）。Staticfile CDN (staticfile.org) 或阿里 Fonts (fonts.alicdn.com) 镜像了 Google Fonts。改用镜像 URL，速度快且无需改代码逻辑。

方案 2：自托管。下载字体文件（.woff2 格式最优，压缩率好、浏览器支持好），放到自己的 CDN 或服务器，用 CSS @font-face 引入。完全不依赖 Google。

自托管的好处：完全控制，加载快；坏处：需要维护文件，字体更新需手动处理。

方案 3：系统字体。不用网络字体，改用本地系统字体栈。例如 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif（iOS 用 SF Pro，Android 用 Roboto，Windows 用 Segoe UI）。最快但定制性低。

最佳实践：优先用方案 3 的系统字体栈作基础，再用方案 1 的镜像加载一个装饰字体（如标题用 Google Fonts 的 Playfair Display）。这样即使镜像加载慢也有降级方案。

开源字体（Google Fonts、思源系列）都是免费可商用，但设计师常想要更独特的字体。付费字体市场的巨头有：

Typekit (Adobe Fonts)：Adobe 订户包含数千字体库，既有经典（Garamond Pro、Myriad）也有现代（Neue Haas）。订阅制，按月付费。用于网页时需链接 Adobe 的加载脚本。

Hoefler & Co：高端美国字体厂，职业设计师的选择。单字体 99-200+ 美元。Gotham、Ringside 等业界名作。

MyFonts：全球最大字体市场，品种最多但质量参差。可按单字体购买，5-50 美元不等。

国内付费字体：汉仪、华康、文鼎等老牌，专业中文字体库质量高。按授权方式（个人用、商业网站、印刷）计费。

版权陷阱：很多人下载免费字体时不看许可证。Open Source 字体通常是 OFL 或 Apache 2.0，可自由商用；但有些字体只许「个人用」，商业网站用了违法。购买前一定确认许可。网页用字体还要注意授权的是否包括「Web 使用」，很多桌面软件字体不许网页加载。