独立开发者的选字体实用指南

选择字体时，常见的困难不是选择太少，而是很难判断一款字体是否适合真实页面。比起寻找一款“最好看的字体”，更有效的方式是先确定文字要完成什么任务。

博客重视长时间阅读，产品界面重视状态、数字和操作，品牌首页则需要适度的识别度。快速生成页面时，如果没有先定义字体规则，常会出现标题醒目但正文难读、中英文字体不协调、不同页面各用一套字体等问题。

如果不想比较太多，可以先使用 Inter + Noto Sans SC；需要更强的品牌感时，再增加一款只用于标题的展示字体。

按场景快速选择

三组常见搭配效果

稳妥产品：Inter + Noto Sans SC

英文界面与正文	中文界面与正文

这组风格中性，适合博客、SaaS、后台和需要长期维护的产品。

科技品牌：Space Grotesk + Inter

首屏大标题与品牌名	正文与界面

Space Grotesk 用于品牌名、Hero 和短标题，Inter 用于正文与界面；中文可搭配 Noto Sans SC 或思源黑体。

温和内容：Manrope + 霞鹜文楷

英文标题与界面	中文文章正文

这组适合个人主页、随笔和内容创作者。密集后台仍建议使用更中性的中文黑体。

选择字体时的四个关键因素

1. 中文覆盖与系统回退

很多字体推荐只展示英文。如果没有指定中文字体，浏览器会根据操作系统自动回退，页面在 macOS、Windows 和 Android 上可能呈现出明显差异。

包含中文内容时，应明确中文字体和回退顺序。简体中文界面可以从 Noto Sans SC / 思源黑体开始；长文阅读可以考虑思源宋体或霞鹜文楷。

2. 字体角色

网站字体一般可以分为三个角色：

• 正文（Body）：正文、导航、按钮、表格。它应该安静、稳定。
• 展示（Display）：首屏大标题、品牌名、短标题、关键数字。它可以更有性格。
• 等宽（Mono）：代码、命令、版本号。普通正文和界面标签仍应使用正文字体。

展示字体不是必需品。正文字体和系统回退字体才是基础。

3. 加载成本

中文字体文件通常较大，应避免同时加载多套字体、全部字重和不会使用的字符集。

多数博客和产品保留 400、500、600 三档字重即可；优先使用 WOFF2（网页字体压缩格式）或可变字体，并设置可靠的系统回退字体。Next.js 可以用 next/font 在构建时下载并自托管字体；如果构建环境访问外部字体源不稳定，可以用 next/font/local 管理仓库里的字体文件。

4. 授权范围

网站文字和产品截图通常比字体文件再分发风险低。以下场景要重新查看官方许可证：

• 把字体文件打包进 App；
• 在模板、建站工具或设计 SaaS 中提供字体；
• 修改、裁剪或转换字体文件；
• 用字体制作注册商标或正式字标。

“免费商用”通常指可以用字体制作商业内容，不代表字体文件可以随意修改或再分发。使用企业自定义许可或 Fontshare 闭源字体时，应在项目中记录许可证链接和字体版本。

免费商用字体汇总

下面这些字体都允许用于常规商业网站和产品。授权栏同时标出许可类型，便于在项目中留档。

其中，SIL OFL 1.1 是常见的开放字体许可证；Fontshare FFL 是 Fontshare 的免费字体许可证。两者都允许表格中所述的常规商业使用，但对字体文件本身的修改和再分发有不同要求。

三套可直接使用的字体栈（font stack）

稳妥的中英文产品

:root {
  --font-sans: "Inter", "Noto Sans SC", "PingFang SC",
    "Microsoft YaHei", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

有一点科技感的品牌网站

:root {
  --font-display: "Space Grotesk", "Inter", "Noto Sans SC", sans-serif;
  --font-sans: "Inter", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;
}

只把 --font-display 用在 Hero、wordmark 和短标题上。

更适合阅读的博客

:root {
  --font-ui: "IBM Plex Sans", "Source Han Sans SC", system-ui, sans-serif;
  --font-article: "IBM Plex Serif", "Source Han Serif SC", serif;
  --font-mono: "IBM Plex Mono", monospace;
}

article {
  max-width: 68ch;
  line-height: 1.7;
}

CSS 中的 ch 以数字 0 的字宽为参考，适合控制拉丁文字行宽。中文正文可以把最大宽度控制在约 40 个汉字附近，避免长文横跨整个大屏。

给 Coding Agent 的字体提示词

下面的 Prompt 可以直接交给 Coding Agent，使用前将方括号替换成项目实际情况：

请为这个[技术博客 / SaaS / AI 产品 / 个人品牌网站]建立统一字体系统。

内容语言：[简体中文 + 英文]
希望的气质：[克制、技术感、温和、编辑出版风格]

要求：
- 全站只使用一套正文 Sans、一套可选 Display 和一套 Mono。
- 中文必须指定明确字体和 macOS、Windows 系统回退。
- Display 只用于 Hero、wordmark、短标题和关键数字。
- Mono 只用于代码、命令和版本号。
- 只加载实际使用的字重，优先 WOFF2/可变字体，并使用 font-display: swap。
- 检查 320px 移动端、中英文混排、字体加载失败和 200% 文字缩放。
- 不允许单个页面私自引入新字体。

请输出：推荐组合、选择理由、CSS 变量、Next.js 加载代码、fallback、授权链接和验收清单。

使用 Vibe Coding 工具生成页面时，可以把这段加入项目级规则，避免不同页面重复选择或新增字体。

上线前检查

• 中文、英文、数字、标点和代码是否都测试过？
• 手机和 Windows 上是否出现意外回退、溢出或按钮截断？
• 正文是否太宽、太细或行距太紧？
• 页面实际加载了几套字体、几个字重？
• 项目里是否保存了字体来源和许可证链接？

字体方案可以随产品逐步完善。先确定可靠的正文和回退方案，再根据真实内容决定是否增加品牌字体，通常比一开始比较大量候选字体更高效。

主要参考

• Next.js Font Module
• Google Fonts
• Fontshare License
• W3C：Visual Presentation
• W3C：Text Spacing

本文是设计与工程选型指南，不是法律意见。授权信息可能变化，正式使用前应以字体发布方的最新许可证为准。