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 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cnfontsource/pkg

v1.0.2

Published

- 浏览器使用个性化中文字体较为麻烦,巨大的字体库使得网站加载速度无法忍受,虽然有些网站提供了在线转换的 API,其原理通过JS分析元素用到的汉字,再对应到服务端请求字体集,但这样需要额外的代码且增加了额外的延时,同时对于动态变化的内容无法做到很好的支持。其独立部署和兼容性性能等也有不便。 - 通过汉字常用字符分类生成分段字库方式实现汉字字库的按需加载,期望尽可能提升中文字库加载速度,以达成中文字库在 WEB 端的可用性。 - 浏览器将智能根据实际用到的文字,自动下载用到的相关的小型字体分段包,达到优

Downloads

4

Readme

适用于浏览器加载的汉字字体集

  • 浏览器使用个性化中文字体较为麻烦,巨大的字体库使得网站加载速度无法忍受,虽然有些网站提供了在线转换的 API,其原理通过JS分析元素用到的汉字,再对应到服务端请求字体集,但这样需要额外的代码且增加了额外的延时,同时对于动态变化的内容无法做到很好的支持。其独立部署和兼容性性能等也有不便。
  • 通过汉字常用字符分类生成分段字库方式实现汉字字库的按需加载,期望尽可能提升中文字库加载速度,以达成中文字库在 WEB 端的可用性。
  • 浏览器将智能根据实际用到的文字,自动下载用到的相关的小型字体分段包,达到优化加载速度的目的,而大量字库中不常用的字和符号等将不进行网络请求加载,可以打开调试器查看网络状况。
  • 我们为分段 WEB 字体直接生成了 css 文件,可通过 CDN 直接引用或者下载包到自己的项目中,详情请参阅每个字体包的说明。
  • 本项目仅搜录使用 WEB 中文字体工具制作的可用于 WEB 直接显示的字体集,所有内容内容由网友自行制作并发布到 NPM 仓库。

!!非常感谢提供免费和开源的字体作者,让我们能够轻松无忧的使用和体会汉字之美。

!!感谢所有字体的作者,让我们看到更精彩多样的汉字。

!!也支持商业化字体,付出有了回报,才能有更多优秀作品。

欢迎提交新字体,字体制作方法见下面章节。

技术方案和更新

本仓库由原有的仓库 https://github.com/wc-one/cn-font/ 仓库迁移而来,更新以下内容:

  • 升级和完善了字体格式转换工具,开放给大家自行使用
  • 所有字体进行压缩为woff2
  • 升级了 L1 和 L2 字库,使用国家字库分级标准。
  • L1 级更改为 192 字分包,L2 级更改为 96 字分包,L3 级改为 64 字分包,平衡生成 CSS 和字体实际文件大小。
  • L1 和 L2 支持繁体
  • 优化了生成的 css 的大小
  • 支持本地字库优先引入
  • 字体发布到 NPM 的包名,从原有 NPM 组织二级名称,调整到以**cn-fontsource-**为前缀的全名,便于大家自行发布和自动化收录
  • 因Firefox浏览器兼容性,将原L1 Block加载模式的字库改为Swap

使用

  • 可通过 npm 本地安装字体包
  • 也可直接使用 jsdelivr 直接 CDN 加载, 在下方页面点击相关字体,可查看字体包相关说明。

字体制作和发布

安装工具软件

请使用 npm 软件包工具,执行以下命令,也可以使用yarn,pnpm等

npm install --global @wcex/cn-fontsource

安装完成即可直接执行命令: cn-fontsource

创建和发布字体

  1. 注册和创建你的 NPM 账号,https://www.npmjs.com/
  2. 确保你的 npm 已经登录,使用以下命令验证: npm login
  3. 创建字体目录
  4. 在字体目录下建立 font.json5 文件, 按以下样例填写(以 悠哉字体 为例)

请认真核对和填写每一项内容,对使用者负责

{
  // 字体名称
  name: "悠哉字体",
  // 字体分类,请按照实际填写
  fontClass: ["悠哉", "手写"],
  // 版本,如此前发布需重新发布,需升级此版本号以便发布到NPM
  version: "1.0.3",
  // 描述信息
  description: "本字体是一款基于 Y.OzFont 的手写风格的字体。利用原字体中已有的笔划和部件,通过拼接和调整造出新字 (必要时自己用鼠标写出部件) 。目前已补全原字体中有对应繁体字的简体字、 GB 2312 范围内的所有汉字 (6763 个) 、《通用规范汉字表》范围内的所有汉字 (8105 个) ,BIG5-2003 范围内的所有汉字 (13058 个,包含台湾教育部门规定的 4808 个常用汉字) 。",
  // 扩展名,仅能英文,当npm存在同名包需要覆盖时用
  ext: "",
  // 类型,必须正确填写: free-免费字体, opensource-开源字体, paid-商业字体
  type: "opensource",
  // 字体来源链接,请确认
  link: "https://github.com/lxgw/yozai-font",
  // 字体授权信息,请确认
  license: "free",
}
  1. 下载字体文件到此目录, 当前支持 ttf 和 otf 格式。
  2. 如同一字体有多个字重,请一并下载到此目录,如不同名称或者风格,请新建目录和起名。
  3. 准备好目录后,执行: cn-fontsource [目录名], 即可一键提交发布到NPM。
  4. 发布完成后,请到 npm 网站确认发布成功。 https://www.npmjs.com/

提交新字体后,请在 https://github.com/wc-ex/cn-fontsource/issues 中发布消息提醒我们更新字体目录。 发现自动收录字体有版权风险或者其他问题也请在 https://github.com/wc-ex/cn-fontsource/issues 提出。

以下字体列表为通过 NPM 进行自动索引,内容均为网友自行提交,请使用者自行鉴别,谨防造成不必要的麻烦。使用商业字体请尊重版权和他人劳动成果。

点击字体名称可跳转到字体包首页,内有引用说明

开源字体: 22

免费字体: 21

商业字体: 0