Skip to content

嵌入字体

使用 ZSFT 的公益 FontsAPI 快速地让 Web 应用程序 UI 拥有它们!

FontsAPI 也称为 “字体 API”。

使用

现在就 浏览字体 找到喜欢的字体并点击 “嵌入到 Web 项目” 按钮。

集成

对比

方法无阻塞无闪烁高优先级灾备
常规 CSS
常规 CSS (URI)
HTML 强化
高级冗余.js

高优先级代表加载字体的时机更早,但容易导致主内容渲染阻塞。

灾备域

FontsAPI 由 L1 域 fontsapi.zeoseven.com 直接提供,并在意外情况、流量分流时全量或部分地 307 重定向至 L2 域。

L2 域(灾备域) fontsapi-storage.zeoseven.com 会始终启用,也可以在代码中直接使用 L2 域来加载(但通常只是用作回退),虽然 L2 域在过往的稳定性表现极佳,但 L2 域在中国大陆的性能仍待提升。

常规 CSS

这是最通用也是推荐的方法,任何字体都会提供此选项,可以将它使用在 .css 文件或 HTML 的 style 中。

  • URI 模式:当是小型字体时,会尝试声明所有字重,并 URI 编码为一个字符串,实现和大型字体同样的 @import 效果。

HTML 强化

此选项可以解决常规 link 加载 CSS 阻塞渲染的问题,但可能导致字体闪烁,同时使用 noscript 标签确保兼容性。仅在大型字体中提供。

高级冗余.js

使用 Fetch API 动态创建 stylehead ,以异步形式、绝对路径和冗余加载字体,仅在大型字体中提供。

英文子集化

WARNING

英文子集化已在 2025-11-24 后被弃用,可参阅 ZeoSeven Blog

私有部署

不希望向第三方发送数据?使用 ZSFT CLI 创建私有部署。