custom-chinese-fonts

🀄 精选中文字体集合，提供 CSS @font-face 声明，支持 Web 端快速引用。

✨ 特性

• 📦 发布到 npm，自动可通过 unpkg / jsdelivr CDN 访问
• 🗜️ 自动生成 woff2 格式，显著减小体积
• 🎨 支持按需引入单个字体
• 📝 自动生成 TypeScript 类型定义
• 👀 内置字体预览页面生成

📥 安装

npm install custom-chinese-fonts

🚀 使用

方式一：NPM 引入（推荐）

// 引入全部字体
import 'custom-chinese-fonts/css/index.css';

// 按需引入
import 'custom-chinese-fonts/css/AiDianFengYa.css';

方式二：unpkg CDN

<!-- 全部字体 -->
<link rel="stylesheet" href="https://unpkg.com/custom-chinese-fonts/css/index.css">

<!-- 按需引入 -->
<link rel="stylesheet" href="https://unpkg.com/custom-chinese-fonts/css/AiDianFengYa.css">

<!-- CDN 绝对路径版（推荐纯 HTML 项目使用） -->
<link rel="stylesheet" href="https://unpkg.com/custom-chinese-fonts/dist/css/unpkg.css">

方式三：jsdelivr CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/custom-chinese-fonts/css/index.css">
<!-- CDN 绝对路径版 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/custom-chinese-fonts/dist/css/jsdelivr.css">

方式四：微信小程序

wxss 文件使用 jsdelivr CDN 绝对路径加载字体，无需额外配置域名白名单（jsdelivr 已被微信信任）。

方法 A：npm 安装后引用

npm install chinese-fonts

在 app.wxss 中引入：

/* 引入全部字体 */
@import './miniprogram_npm/custom-chinese-fonts/wxss/index.wxss';

/* 按需引入 */
@import './miniprogram_npm/custom-chinese-fonts/wxss/AiDianFengYa.wxss';

方法 B：直接复制 wxss 内容

将 wxss/index.wxss 的内容复制到你的 app.wxss 文件中即可。

然后在页面中使用：

<view style="font-family: 'AiDianFengYa';">风雨送春归</view>

在 CSS 中使用

h1 {
  font-family: 'AiDianFengYa', sans-serif;
}

p {
  font-family: 'ChenYuluoyan', sans-serif;
  font-weight: 100;
}

JS API

const { fonts, getFont, getFamilyNames } = require('custom-chinese-fonts');

console.log(getFamilyNames());
// ['AiDianFengYa', 'ChenYuluoyan', 'JingNanBoBoHei']

console.log(getFont('AiDianFengYa'));
// { family: 'AiDianFengYa', displayName: '爱点风雅黑', weight: '900', ... }

📋 字体列表

| 字体名 | font-family | 字重 | 描述 | |---------|------------|------|------| | 爱点风雅黑 | AiDianFengYa | 900 (Black) | 适用于标题、海报等场景 | | 沉鱼落雁细体 | ChenYuluoyan | 100 (Thin) | 纤细优雅的中文字体 | | 京南波波黑粗体 | JingNanBoBoHei | 700 (Bold) | 活泼可爱的标题字体 |

🛠️ 开发

# 添加新字体（交互式）
npm run add-font -- /path/to/font.ttf

# 添加新字体（带参数）
npm run add-font -- /path/to/font.ttf --family MyFont --display "我的字体" --weight 400

# 构建（生成 woff2 + CSS + JS）
npm run build

# 生成字体预览页
npm run preview

# 发布
npm run release:patch   # 1.0.0 → 1.0.1
npm run release:minor   # 1.0.0 → 1.1.0
npm run release:major   # 1.0.0 → 2.0.0

📄 License

MIT

⚠️ 本项目收录的字体文件可能有各自的授权协议，请在使用前确认字体的版权信息。