跳转至

Zensical 的小技巧⚓︎

使用 MiSans 字体⚓︎

基础使用⚓︎

字体选择与下载

首先去 MiSans 官网 下载字体, 有很多选项, 我选择的是第一个 MiSans, 下载解压之后有很多目录, 分别代表不同的格式, 选一种来用就行了, 我选的是可变字体, 文件是 MiSansVF.ttf

目录名称 格式与特征
ttf 经典桌面字体格式, 兼容性最强, 几乎所有系统都能直接用, 适合本地安装, 但文件大、没压缩、网页加载慢, 不推荐做网页主字体。
otf TTF 的升级版, 支持更多高级排版特性, 如连字、SS01、上标、分式等, 质量更高, macOS 表现优秀, 但体积同样大、网页效率低, 主要用于设计和印刷。
woff 网页专用格式, 对 TTF/OTF 进行 zlib 压缩, 体积小 30–50%、保留所有特性、兼容 IE9+, 但压缩不如 WOFF2, 现在多做 fallback。
woff2 WOFF 的升级版, 用 Brotli 压缩, 体积再小 20–30%、加载最快、特性完整、现代浏览器全支持, 是当前网页字体的首选。
可变字体 现代技术, 一个文件就能控制所有字重、宽度、斜体等变化, 体积最小、加载高效、过渡平滑, 适合字重多的字体族, 是简化配置的好选择。
.DS_Store 这不是字体文件, 是 macOS 系统自动生成的隐藏文件（桌面设置缓存）, 完全无用。直接忽略或删除它即可, 不会影响字体使用。
装载与配置

  1. 创建 docs/assets/fonts 这个目录, 将 MiSansVF.ttf 文件放进去。

  2. 在自定义 CSS 文件中添加规则, 让自定义字体覆盖项目字体。 别忘了在项目配置文件中添加自定义 CSS 文件 

    @font-face {
    font-family: "MiSansVF";
    src: url("../assets/fonts/MiSansVF.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

    [project]
extra_css = ["stylesheets/extra.css"]

  3. 然后在自定义 CSS 文件中设置将字体用于特定元素, 例如仅应用于标题、整个网站或者用作常规字体或代码字体。我配置了常规字体, 因为我觉得代码字体用上不好看。

    :root {
    --md-text-font: "MiSansVF", sans-serif; /* (1)! */
}
    1. 尽量使用 CSS --md-text-font 等内置变量去定义字体, 而不是直接使用 font-family, 因为这样做会禁用系统字体的回退。
    :root {
    --md-code-font: "MiSansVF", sans-serif;
}

使用高级特性⚓︎

MiSans 包含多种 OpenType 高级排版功能, 也就是可以让字体排版更加精致, 符合实际设计、开发需求, 每个字体功能都有对应的标签, 用于标记功能效果。MiSans 包含 15 种特性以满足不同业务对字体上的不同需求, 提供可选择性。

  1. 局部开启(推荐), 用内联样式或者自定义类使用, 这样也不会影响其他正常文本, 使用方法如下：

    .ss01{
    font-feature-settings: 'ss01' on;
}

    已开启: 123,435,400
    未开启: 123,435,400 

    未开启 __123,435,400__
已开启 __123,435,400__{style="font-feature-settings: 'ss01' on"}

    未开启 123,435,400
    已开启 123,435,400

    这个特征是数字专用标点, 除了这个还有其他的特征:

    CSS 底层配置 特征效果 未启用 已启用
    'ss01' 数字专用标点 :1,234,356 :1,234,356
    'ss02' 单位改为上标 96% 96℃ 96% 96℃
    'ss03' 单位改为下标 96% 96℃ 96% 96℃
    'ss04' 数字等高汉字 4月21日 4月21日
    'ss05' 将大写的 M 改为 小米 图标 M M
    'ss06' 将大写的 M 改为 MIUI 图标 M M
    'ss07' 西文式标点 “Hi, it’s me” “Hi, it’s me”
    'ss08' 拨号专用符号 *0# *0#
    'SS09' 小字面数字 359264 359264
    'case' 大中小三个括号与大写字母等高 (HBCD) (HBCD)
    'frac' 分数 5/9 5/9
    'sups' 数字/小写字母全部为上标 12ABab 12ABab
    'tnum'1 数字等宽 1,234,567,890 1,234,567,890

  2. 全局开启, font-feature-settings 属性提供了对 OpenType 字体特性的底层精细控制, 它的设计初衷是让开发者能够访问那些不常用但在特定场景下非常需要的字体特性, 所以在全局状态下使用这个属性浏览器不一定会渲染。所以这是我想到一个强制加载的方法, 但是比较麻烦。

    :root {
    --features: "tnum" on, "ss04" on;
}

* {
    font-feature-settings: var(--features);
}

    <div style="font-feature-settings: var(--features), 'ss01' on">
2026年4月21日 15:23
</div>

    2026年4月21日 15:23 | 对比: 2026年4月21日 15:23

  1. M MiSans 官网写错了, 他写的 thum ↩