FontX - 面向开发者的字体搭配与字号层级工具

读出来的字体,比看样张选出来的更靠谱

FontX 把标题、正文与代码字体放在真实的文章、字号层级和界面中对比,并沿用你在 ColorX 中的配色。从 2000 多款开源字体(包括中文字体)中挑选,再复制适配你技术栈的配置代码。

使用方式

  1. 01

    先选角色,再选字体

    选择标题、正文或代码,然后在字体目录中挑选。可以按分类筛选或搜索,每款字体都以自身字形显示名称。

  2. 02

    在真实场景中阅读

    在文章、字号层级与真实界面之间切换。调整字重和字号比例,或从推荐搭配开始。

  3. 03

    复制配置

    获取 Tailwind CSS、CSS、Google Fonts 链接、next/font 或 Nuxt 配置,只包含实际用到的字重。

导出格式

Tailwind CSS v4
Fontsource 引入语句,以及包含 font-sans、font-heading、font-mono 与 text-* 字号的 theme 配置。
CSS
Google Fonts 引入(其他字体使用 Fontsource)、CSS 变量,以及正文、标题与代码的基础样式。
HTML
预连接提示与一条 Google Fonts 样式表链接。
Next.js
带 CSS 变量的 next/font/google 加载代码,可直接放进 app/layout.tsx。
Nuxt
Nuxt Fonts 模块的字体列表,构建时自动下载并自托管字体文件。

常见问题

字体来自哪里?

字体目录来自 Fontsource,包含全部 Google Fonts 字体以及其他开源字体。FontX 只会从公共 CDN 加载你正在预览的字重。

支持中文字体吗?

支持。中文字体按字符范围切分,预览时只下载屏幕上出现的字。把示例文字切换为中文,可以更准确地判断效果。

这些字体可以商用吗?

绝大多数字体采用 SIL Open Font License,允许商用。上线前请确认所选字体的具体许可证。

更多工具