Web Font

所有字体Agent Skill Demo 离线裁剪 Star on GitHub

如清风似闪电，超级快的字体子集化裁剪

-- 请选择 --

无编码开销，适合开发

原理：服务端根据 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.loadFont({
    fontName: "字体文件名.ttf",
    selector: ".title, .content",
    family: "MyFont",
    interval: 1000,
  });
</script>

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

赞助支持