SDK 集成文档

为你的网站接入中文字体按需加载

原理：服务端根据 text 参数裁剪字体，只返回所需字符的子集。相同 URL 的请求会被浏览器自动缓存。

基础用法：将 CSS 复制到你的页面，修改 text 参数中的文字即可：

<style>
@font-face {
  font-family: "MyFont";
  src: url("/api?font=字体名&text=你的文字") format("woff2");
}
.title { font-family: "MyFont"; }
</style>
<h1 class="title">你的文字</h1>

JS SDK（推荐）：增量加载字体片段，按需请求，不会出现全量字体闪烁。下载 SDK

<script src="/webfont-sdk.js"></script>

<h1 class="title">你的文字</h1>
<p class="content">输入任意文字，SDK 自动裁剪加载</p>

<script>
  WebFont.observeFont({
    fontName: "字体文件名.ttf",
    selector: ".title, .content",
    family: "MyFont",
  });
</script>

还支持WebFont.observeFont()（MutationObserver 事件驱动）和WebFont.loadText()（手动传文本）两种方式，多种方式可同时使用，SDK 内部自动按字体去重增量加载。