npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

webfont-sdk

v0.2.1

Published

Web 字体按需加载 SDK —— 只加载实际用到的字符,增量去重、无闪烁,支持 DOM(CSS) 与 Canvas(FontFace) 两种模式,内置服务端 REST API 客户端

Readme

webfont-sdk

中文字体按需增量加载 SDK —— 只加载页面/画布实际用到的字符(6 字 ≈ 6KB,而非 16MB),无闪烁。

webfont.shenzilong.cn 子集化服务的官方前端 SDK,也是 leafer-x-webfont(LeaferJS 插件)的底层引擎。

特性

  • 增量加载IncrementalEngine 按字符集去重,只请求新增字符,同类文字滚动输入不重复请求
  • 双模式:CSS 模式(WebFont,面向 DOM)+ FontFace 模式(WebFontCanvas,面向 Canvas)
  • API 客户端webfont-sdk/api 子路径封装字体列表 / 元数据 / 上传 / 统计等 REST 接口
  • 失败记忆:裁剪失败的字符自动记录,不反复重试浪费请求
  • unicodeRange 注册:Canvas 模式用 unicodeRange 精确注册字符片段,天然无闪烁
  • 并发控制:可配置请求并发池,避免瞬时打爆服务端
  • 自定义 providersetSubsetProvider 可替换为本地裁剪(离线场景)

安装

npm install webfont-sdk

使用

CSS 模式 —— DOM 页面按需加载

import { WebFont } from 'webfont-sdk'

// 事件驱动:自动观察 selector 内的文字变化
const observer = WebFont.observeFont({
  fontName: '令东齐伋复刻体.ttf',
  selector: '.title, .content',
  family: 'MyFont',
  baseUrl: 'https://webfont.shenzilong.cn', // 默认 location.origin
})
observer.dispose()

// 手动传文本
const loader = WebFont.loadText({ fontName: '令东齐伋复刻体.ttf', text: '静心茶舍', family: 'MyFont' })
loader.update('追加的文字')
loader.dispose()

FontFace 模式 —— Canvas / LeaferJS 场景

import { WebFontCanvas } from 'webfont-sdk'

const face = WebFontCanvas.loadFontFace({ fontName: '令东齐伋复刻体.ttf' }, () => {
  /* 字体片段就绪,在此重绘画布 */
})
face.update('画布上的文字')
await WebFontCanvas.ready()

script 标签直引(不打包场景)

<script src="https://webfont.shenzilong.cn/webfont-sdk.js"></script>
<script>
  WebFont.observeFont({ fontName: '令东齐伋复刻体.ttf', selector: '.title', family: 'MyFont' })
</script>

服务端 REST API 客户端

增量加载之外,SDK 还封装了子集化服务的公开 REST 接口(字体列表 / 元数据 / 上传 / 统计), 独立子路径导出,不进主入口:

import { createWebFontApi } from 'webfont-sdk/api'

const api = createWebFontApi({ baseUrl: 'https://webfont.shenzilong.cn' })

/** 字体列表(文件名 + 是否临时字体) */
const fonts = await api.fonts()

/** 字体元数据:codepoint 区间 / 各字符集覆盖率 / name 表信息 / 站长配置 */
const meta = await api.fontMeta('霞鹜文楷.ttf')

/** 上传临时字体(默认到期自动清理;admin 模式需 apiKey) */
const result = await api.upload({ data: file, filename: '我的字体.ttf' })
if (!result.success) console.error(result.error)

/** 服务配置 / 运行统计 */
const config = await api.config()
const stats = await api.stats()

文档

完整 API 文档:https://webfont.shenzilong.cn/docs

License

MIT