让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目

本文最后更新于 2026-03-01 。

图片[1]｜让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目，WordPress / 子比主题博客字体美化实战｜白鱼小栈
小米 MiSans 字体｜官网 ↗

前言

今日想给博客换个全局字体，偶然发现 MiSans Webfont 这个非常不错的项目：

图片[2]｜让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目，WordPress / 子比主题博客字体美化实战｜白鱼小栈
项目地址｜GitHub ↗

MiSans Webfont 是一个基于小米官方 MiSans 字体制作的 Web 字体分包项目。该项目将每个字重拆分为近 200 个分片（woff2），每个分片只包含部分 Unicode 字符，方便字体在网页中加载。

项目利用了 中文网字计划 开发的字体分包工具对原字体分包，网页加载时，用户只需获取所使用的文字所在的分包，大幅降低所需加载的大小，提升网页加载速度。

MiSans 是由小米主导，联合蒙纳字库、汉仪字库共同打造的全球语言字体定制项目。这是一个庞大的字体家族，涵盖 20 多种书写系统，支持 600 多种语言，字符数量超过 10 万个。作为 Xiaomi HyperOS 系统默认字体，其以简约/清晰，人文/易读，统一的视觉风格为基本原则出发，构建多语言信息体验一致性，旨在帮助为 Xiaomi HyperOS 提供互联的通用体验。

进一步了解 Misans 及许可协议 ↗

　

1. 基本使用方法 —— 快速使用

直接将下面提供的代码以 <link> 的形式添加到网页的 <head> 内即可：

获取更快的响应速度：

  • Bootcdn：https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans-style.css（国内加载速度相对较快）
  • Webcache：https://npm.webcache.cn/misans-webfont/misans-style.css
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans-webfont/misans-style.css" />
  <style>
    body {
      font-family: "MiSans Bold";
      font-weight: bold;
    }
  </style>
</head>

你也可以只引用单一的字体，修改上文 href 链接为：

具体可以引用的字体请查看：fonts 分支，找到具体字体中的 result.css 并修改上文链接。

https://cdn.jsdelivr.net/npm/misans-webfont/misans/misans-bold/result.min.css

如果你有自己的 CDN，也可以将字体文件自托管，获得更稳定可控的加载体验，详见本文第 4 节。

　

2. 示例配置（适用 WordPress / 子比主题）

MiSans Webfont 的每个字重都对应独立的 font-family 名称，可按需在 CSS 中进行配置。

/* 正文 */
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
/* 标题 */
h1, h2, h3, h4 { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 强调文本 */
strong, b { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 按钮 */
button, .button { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
.wp-posts-content li { margin-bottom: 6px; }
/* 文章标题 */
h2.item-heading.text-ellipsis { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif !important; font-weight: normal !important; }
/* 下一页按钮 */
.next-page.ajax-next.lazyloaded { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }

　

3. 进阶用法

3.1 苹果设备优先用系统字体

苹果设备自带的 PingFang SC（苹方）字体在中文显示效果已经非常不错。

因此笔者建议：可以检测用户是否是苹果设备，如果是则优先调用系统的苹方字体。

将其放在 font-family 的最前面即可：

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif;

检测功能的实现：

<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/.test(navigator.platform);
if (!isAppleDevice) {
    // 只加载实际使用的3个字重
    const weights = ['regular', 'demibold'];
    const baseUrl = 'https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans/misans-';

    weights.forEach(weight => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = `${baseUrl}${weight}/result.css`;
        document.head.appendChild(link);
    });
}
</script>

这样，Mac/iPhone/iPad 用户会优先用系统字体，只有非苹果设备才加载 MiSans。

　

3.2 按需加载字体资源，提升速度

MiSans Webfont 的主 CSS 会导入全部 10 个字重，每个字重包含近 200 个分片。

实际页面只需用到少数几个字重时，可以只加载对应的 CSS 文件（修改第 4 行）：

<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
if (!isAppleDevice) {
    const weights = ['regular', 'demibold', 'semibold'];
    const baseUrl = 'https://cdn.bootcdn.net/ajax/libs/misans-webfont/4.3.1/misans/misans-';
    weights.forEach(weight => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = `${baseUrl}${weight}/result.css`;
        document.head.appendChild(link);
    });
}
</script>

还可以在 <head> 添加 DNS 预连接，提高加载速度：

<link rel="dns-prefetch" href="https://cdn.bootcdn.net">
<link rel="preconnect" href="https://cdn.bootcdn.net" crossorigin>

　

4. 自托管字体文件

如果你已有自己的 CDN，将字体文件自托管是更可靠的选择，同时也能获得更稳定、更快速的加载体验。

使用第三方 CDN 存在一定风险。以 bootcdn 为例，其曾与 polyfill.io 供应链攻击事件关联，被用于向用户注入恶意脚本。

4.1 下载字体文件

通过 npm 拉取完整字体包：

这条命令可以直接在你的 Windows 电脑上执行，前提是已安装 npm

npm install misans-webfont

安装完成后，在 node_modules/misans-webfont/misans/ 下找到所需字重的目录：

图片[3]｜让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目，WordPress / 子比主题博客字体美化实战｜白鱼小栈
misans/
├── misans-light/
│   ├── result.css      ← 主 CSS，声明所有分片的 @font-face
│   ├── [0].woff2
│   ├── [1].woff2
│   └── ...（约 80～100 个分片）
├── misans-regular/
├── misans-medium/
├── misans-demibold/
└── misans-bold/
图片[4]｜让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目，WordPress / 子比主题博客字体美化实战｜白鱼小栈
上传到 CDN/对象存储

将需要的字重目录完整上传到你的 CDN，保持目录结构不变。result.css 内部使用相对路径引用分片，只要目录结构不变，无需修改任何 CSS 内容。

　

4.2 配置 CDN 响应头

在你的 CDN 或服务器上为字体文件添加以下响应头：

Cache-Control: public, max-age=31536000, immutable
Access-Control-Allow-Origin: *

Cache-Control 让浏览器将字体缓存一整年，二次访问直接走本地缓存。Access-Control-Allow-Origin 是字体跨域加载的必要条件，缺少此头浏览器会拒绝加载。

　

4.3 替换加载脚本

将字体加载脚本的 baseUrl 改为你自己的 CDN 地址。

<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
  (navigator.maxTouchPoints > 1 && /Mac/i.test(navigator.userAgent));
function isMIUI() {
  const ua = navigator.userAgent;
  if (/MiuiBrowser|XiaoMi/i.test(ua)) return true;
  if (/2\d{4}[A-Z]{2,4}/.test(ua)) return true;
  if (/\bMI\b|Redmi|POCO/i.test(ua)) return true;
  return false;
}
if (!isAppleDevice && !isMIUI()) {
  const weights = ['regular', 'demibold'];
  const baseUrl = 'https://cdn.baiyuyu.<记得替换>/misans/misans-';
  weights.forEach(weight => {
    const preload = document.createElement('link');
    preload.rel = 'preload';
    preload.as = 'style';
    preload.href = `${baseUrl}${weight}/result.css`;
    preload.onload = function () { this.rel = 'stylesheet'; };
    document.head.appendChild(preload);
  });
}
</script>

　

4.4 附博主使用的全套配置

仅供参考，CSS 以及 JS 代码：

/* 正文 */
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
/* 标题 */
h1, h2, h3, h4 { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 强调文本 */
strong, b { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans Demibold", sans-serif; }
/* 按钮 */
button, .button { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
.wp-posts-content li { margin-bottom: 6px; }
/* 文章标题 */
h2.item-heading.text-ellipsis { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif !important; font-weight: normal !important; }
/* 下一页按钮 */
.next-page.ajax-next.lazyloaded { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "MiSans", sans-serif; }
<script>
const isAppleDevice = /Mac|iPhone|iPad|iPod/i.test(navigator.userAgent) ||
  (navigator.maxTouchPoints > 1 && /Mac/i.test(navigator.userAgent));
function isMIUI() {
  const ua = navigator.userAgent;
  if (/MiuiBrowser|XiaoMi/i.test(ua)) return true;
  if (/2\d{4}[A-Z]{2,4}/.test(ua)) return true;
  if (/\bMI\b|Redmi|POCO/i.test(ua)) return true;
  return false;
}
if (!isAppleDevice && !isMIUI()) {
  const weights = ['regular', 'demibold'];
  const baseUrl = 'https://cdn.baiyuyu.com/misans/misans-';
  weights.forEach(weight => {
    const preload = document.createElement('link');
    preload.rel = 'preload';
    preload.as = 'style';
    preload.href = `${baseUrl}${weight}/result.css`;
    preload.onload = function () { this.rel = 'stylesheet'; };
    document.head.appendChild(preload);
  });
}
</script>

　

全文完

全文完，欢迎体验尝试~

图片[5]｜让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目，WordPress / 子比主题博客字体美化实战｜白鱼小栈

全文完
文章# 值得一试# 建站笔记
© 全站文章均为原创，以 CC BY-NC-SA 4.0 公共许可协议进行许可，转载请保留署名和出处。了解更多

有用0阅读 292 次｜版权提示
相关阅读
讨论 共 6 条
天青色等烟雨，评论在等你
头像

昵称

取消
昵称
  • 昵称
  • 邮箱
  • 网站 (选填)
 表情
[33_diyi][33_han][33_heshui][33_maimeng][33_tuhun][33_wuyan][33_ye][33_yiwen][22_chijing][22_daku][22_daxiao][22_yihuo][22_nu][22_weiqv][22_zibi][1][2][3][4][5][6][7][8][9][10][11][12][13][14][15][16][17][18][19][20][21][22][23][24][25][26][27][28][29][1][2][3][4][5][6][7][8][9][10][11][12][13][14][15][16][17][18][19][20][21][22][23][24][25][26][27][28][29][30][31][32][33][34][35][36][37][38][39][40][41][42][43][44][45][46][47][48][49][50][51][52][53][54][55][56][57][58][59][60][62][63][64][65][66][67][68]
2233贴吧bilibili
 代码

代码

确认
 图片
快捷回复
这篇文章神了！
这篇文章拉了！
真是一篇旷世奇文！
看哭了！
路过一下！
已严肃阅读！
    • 酪西瓜的头像｜白鱼小栈酪西瓜0
      这篇文章神了
      31 天前回复
    • 陆虞的头像｜白鱼小栈陆虞0
      之前自己折腾的时候是尝试直接加载整个字体文件，网站打开特别慢，原来还有webfont这种方法表情[2233/22_chijing.webp]｜白鱼小栈
      35 天前回复
    • Peace的头像｜白鱼小栈Peace0
      这字体确实不错，俺手机也用的是这个字体表情[2233/33_diyi.webp]｜白鱼小栈
      36 天前回复
    • Porn Tude的头像｜白鱼小栈Porn Tude0
      How are you?
      1 个月前回复
看看别的

1免费可商用，微软的开源表情合集 Fluent Emoji

2不要买小米打印机，会变得不幸…

3用 h5ai 搭建一个极简网盘/下载站

4看腻了微软雅黑，试试把 Windows 系统字体替换成 macOS 苹方

5升级到 Umami V3 ，重写博客底部的 “数据挂件” 脚本，显示 UV/PV 等访问数据

1让博客优雅地使用全局 MiSans 字体：MiSans Webfont 字体分包项目

2证件全屏水印助手 V4 发布！一个快速给身份证照片添加全屏水印的 HTML 小工具

3升级到 Umami V3 ，重写博客底部的 “数据挂件” 脚本，显示 UV/PV 等访问数据

4Docker 拉取失败，更换华为云镜像源（Error response from daemon: net/http: request canceled）

5搭建免费、无限空间的图床：Cloudflare Pages 和 Telegraph-Image

1超详细 Matrix Synapse 部署教程：去中心化聊天服务器搭建与配置指南

2Cinny 上手体验：简洁、优雅的新一代 Matrix 客户端

3试试类原生：Redmi K40 刷入 Pixel Experience

4境内外流量分线路解析，同时使用 Cloudflare 和国内 CDN

5搭建免费、无限空间的图床：Cloudflare Pages 和 Telegraph-Image