Project AIRI 字体集成指南:Departure Mono 像素等宽字体在 Web / 桌面端的引入与使用
发布时间:2026/9/12 5:23:11来源:尧图网络
Project AIRI 字体集成指南Departure Mono 像素等宽字体在 Web / 桌面端的引入与使用【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi导读本篇技术指南以 packages/font-departure-mono/src/README.mdDeparture Mono 字体的官方说明文档为核心结合 Project AIRI 中该字体的封装包 packages/font-departure-mono 的源码与构建配置系统讲解Departure Mono 字体的能力特性、像素级渲染技巧以及它在 Project AIRI 前端工程中的实际接入方式。读完本文你将掌握该字体的字形覆盖范围与版本演进脉络、11px 像素对齐渲染要点以及通过 npm 包、CSS 引入、UnoCSS 预设三套路径将字体落地到 Vite 工程的具体做法。一、Departure Mono 是什么Departure Mono 是一款由 Helena Zhang 设计、以复古终端与早期计算机字体美学为灵感的高对比度等宽字体采用SIL Open Font License 1.1开源许可完整条款见 packages/font-departure-mono/LICENSE。这意味着该字体可以被自由使用、学习、修改与再分发只要不单独售卖字体本身并且二次分发时保留版权声明与许可文本即可。在 Project AIRI一个自托管、强调 you-owned 的 AI 陪伴/虚拟生命体项目支持 Web / macOS / Windows中Departure Mono 被封装为独立的 npm 包proj-airi/font-departure-mono作为项目内统一使用的等宽字体资源详见 package.json。说明本仓库的字体封装包 package.json 中作者字段记录为 Tobias Fried这是字体在仓库内的打包维护者信息字体本身的设计版权归属 Helena Zhang见 packages/font-departure-mono/LICENSE 与 src/README.md。正式使用与署名请以字体作者与 OFL 条款为准。二、字体能力与字形覆盖v1.500根据 src/README.md 的官方说明当前封装版本为Version 1.500共 1,186 个字形覆盖范围包括拉丁语系Basic Latin、Latin-1、Latin Extended-A以及绝大多数拉丁系语言西里尔字母Cyrillic完整大小写及扩展字符集基础希腊字母Basic Greek含带重音符号的变体小型大写字母Small caps旧式数字与分数Old-style numerals and fractions简单制表符box-drawing characters与精选符号这一覆盖范围直接决定了它的实际可用场景不仅是英文与代码的等宽排版还能用于包含西里尔文如俄语、希腊文等内容的多语言界面制表符与分数支持则让它适合渲染终端输出、ASCII 图表、表格等复古感UI 元素。2.1 版本演进脉络changelog 解读src/README.md 中保留了从 v1.346 到 v1.500 的变更记录从中可以清晰看到字体的演进方向版本字形数关键变更v1.346763基础版本基线v1.350775新增分数字形↉ ⅓ ⅔ ⅕ … ⅑新增居中替代星号*旧式数字 0/1/2 调整为 x-height修正 ½ ¼ ¾ ⅛ … ‰ 的包围盒调整花括号与其他括号的水平对齐微调*与°的位置v1.4201,030大规模扩充西里尔字符集含 Ѓ Ґ Ӷ Ғ Ҕ、扩展小写等新增希腊字符Ά Έ Ή … ϊ ΐ ύ ϋ新增№、∙微调 Ľ ť ĸ δ ι ʻv1.4221,034新增星形符号 ★ ☆ ✦ ✧修复 Ё/ё 缺失重音的 bug调整 ₽ Д д Ы ы Ъ ъ为 Г г Ѓ ѓ Ґ ґ Ӷ ӷ 添加衬线v1.5001,186新增大规模制表符/块状字符▁ ▂ ▃ … ╞ …新增括号符号 ❰ ❮ ❱ ❯ ❬ ❭其中 v1.500 的制表符扩充对终端类 UI 意义重大覆盖了水平/垂直制表线┌ ┐ └ ┘ ├ ┤ ┬ ┴ ┼ ═ ║ ╔ …、半块与四分之一块字符▏ ▎ ▌ ▋ ▊ ▉ ▐、▖ ▗ ▘ ▙ ▚ …、斜线交叉制表符╱ ╲ ╳以及 U1F302 区块的特殊符号 …足以拼出复杂的字符画与表格边框。三、像素级渲染技巧官方 Usage 要点src/README.md 的 Usage 一节给出了两条关键使用建议追求像素级完美渲染时字号应设置为 11px 的整数倍即 11px、22px、33px、44px ……。Departure Mono 的设计建立在整数像素网格上11px 的倍数能保证每个字符的笔触与网格严格对齐避免亚像素模糊与边缘锯齿从而呈现最锐利、最复古的显示效果。可以尝试更紧或更松的字距letter-spacing / tracking。Departure Mono 的等宽字符本身较紧凑通过调整字距可以适配从密集终端输出到宽松标题展示的不同视觉需求。这两条建议在实际工程中的落地方式以 CSS 为例/* 11px 整数倍 自定义字距 */ .mono-pixel { font-family: Departure Mono, monospace; font-size: 22px; /* 11px 的 2 倍保证像素对齐 */ letter-spacing: 0.02em; /* 根据视觉需要收紧或放宽 */ }四、在 Project AIRI 工程中接入三套落地路径Departure Mono 在仓库内被封装为发布包proj-airi/font-departure-mono包结构如下见 packages/font-departure-monopackages/font-departure-mono/ ├── src/ │ ├── files/ │ │ ├── DepartureMono-Regular.otf # OpenType 格式CSS 实际引用 │ │ ├── DepartureMono-Regular.woff # WOFF 格式 │ │ └── DepartureMono-Regular.woff2 # WOFF2 格式 │ ├── README.md # 字体官方说明本文核心依据 │ ├── index.css # font-face 声明 │ └── index.ts # 包入口仅导入 CSS ├── package.json └── tsdown.config.ts # 构建与复制配置4.1 路径一直接引入 CSS推荐包的入口 src/index.ts 只有一行import ./index.css真正的字体声明位于 src/index.css/* Departure Mono Regular */ font-face { font-family: Departure Mono; font-style: normal; font-display: swap; src: url(./files/DepartureMono-Regular.otf) format(opentype); }要点解读font-display: swap保证字体加载期间先使用后备字体渲染文本避免 FOIT不可见文本闪烁对首屏渲染友好引用的是.otfOpenType格式。.woff2/.woff两个文件同样随包分发见 src/files如需在低带宽场景优先使用压缩格式可自行在font-face中追加对应的format(woff2)/format(woff)源在 Vite 工程中按包名引入即可// 任选其一 import proj-airi/font-departure-mono // 走包入口index.css import proj-airi/font-departure-mono/index.css // 显式指定 CSS引入后即可通过font-family: Departure Mono使用。4.2 路径二通过 UnoCSS 预设声明字体族仓库提供了统一的字体预设包 packages/unocss-preset-fonts/src/index.ts其中将departure注册为 UnoCSS 的具名字体族presetWebFonts({ fonts: { quanlai: { name: cjkfonts AllSeto, provider: none }, departure: { name: Departure Mono, provider: none }, // ← 本项目对应项 xiaolai: { name: Xiaolai SC, provider: none }, }, }),同时在该预设的 preflight 中统一导入了三个字体包的 CSSimport proj-airi/font-cjkfonts-allseto/index.css; import proj-airi/font-departure-mono/index.css; import proj-airi/font-xiaolai/index.css;provider: none表示不使用远程 Web 字体服务而是依赖本地打包的字体资源——这与本项目自托管、资源自持的整体理念一致。接入后在模板里可直接使用font-departure这类 UnoCSS 工具类具体类名规则由 unocss.config.ts 与预设生成规则决定本文以注册关系为准。4.3 路径三直接使用包内字体文件包通过 tsdown.config.ts 的copy配置把字体文件原样复制到产物目录export default defineConfig({ entry: [src/index.ts], external: [./index.css], copy: [ { from: src/files, to: dist }, { from: src/index.css, to: dist }, ], unbundle: true, })package.json 的exports字段显式暴露了文件级子路径exports: { .: { default: ./dist/index.css }, ./index.css: { default: ./dist/index.css }, ./files/*: { default: ./dist/files/* }, ./files/*.otf: { default: ./dist/files/*.otf }, ./files/*.woff: { default: ./dist/files/*.woff }, ./files/*.woff2: { default: ./dist/files/*.woff2 }, ./*: { default: ./*.css } }因此在自定义font-face、或需要在非构建场景如直接引用静态资源时可以按需引入proj-airi/font-departure-mono/files/DepartureMono-Regular.woff2等具体文件。4.4 构建与使用前提包使用tsdown构建pnpm run build即会执行tsdown见 package.json 的 scripts开发态pnpm run dev同样走构建流程使用该包前请确保仓库根目录已执行pnpm installpnpm workspace 管理见 pnpm-workspace.yaml并通过 workspace 依赖或直接以包名安装到目标应用目标工程需为 Vite 系构建仓库内各 app 均为 Vite Vue 工程CSS 中的相对url()会被 Vite 正确解析并处理为构建产物资源。五、仓库内实际使用佐证在仓库源码中可以看到该字体的两处实际引用可交叉验证其可用性packages/ui-loading-screens/playground/src/main.ts 第 10 行import proj-airi/font-departure-mono/index.css即加载页 playground 示例通过显式 CSS 子路径引入字体packages/unocss-preset-fonts/src/index.ts 第 14–17 行将departure注册进presetWebFonts第 31 行在 preflight 中统一 import。两处引用分别对应本文 4.1 与 4.2 两条接入路径说明该字体在实际工程中既可作为独立 CSS 引入也可作为全局字体预设的一部分随项目生效。六、许可证与使用注意字体以SIL OFL 1.1发布packages/font-departure-mono/LICENSE允许自由使用、嵌入、修改与再分发禁止单独售卖字体文件派生字体不得使用保留字体名src/README.md 同时注明字体官方主页为 departuremono.com设计者为 Helena Zhang并致谢了 Tobias Fried、Christine Lee、Daniel Stern 等参与反馈与多语言测试的贡献者见该文档 Thanks 一节使用 OFL 字体生成的文档、截图等产物不受 OFL 约束可以自由使用无需附带字体许可证。结语Departure Mono 以 1,186 个字形、完整的拉丁/西里尔/希腊覆盖、制表符与分数支持以及 11px 整数倍的像素级渲染特性成为 Project AIRI 中兼具复古终端美学与多语言能力的等宽字体选择。通过 packages/font-departure-mono 封装包开发者既可以在 Vite 工程中一键 import CSS 使用也可以通过 packages/unocss-preset-fonts 的字体预设与font-departure工具类体系集成或直接按需引用woff2/woff/otf文件。结合字体本身的 OFL 开源许可这一字体资源可以在自托管的 Web、macOS 与 Windows 客户端中放心分发与使用。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网