@TechUI/Fonts 规划预览
TechUI Fonts (字体库) 是 TechUI 生态系统中专为排版美学打造的资源包。
在 Web 开发中，字体往往是性能的隐形杀手。@techui/fonts 的核心使命是在“极致的视觉呈现”与“严苛的加载性能”之间寻找完美的平衡点。它旨在通过智能的打包策略，让开发者能够像搭积木一样轻松引入高质量的开源字体。
🚧 状态说明
当前库状态：规划与开发中 (Coming Soon) 该库尚未正式发布到 NPM。以下文档描述的是其设计目标与架构思路，旨在展示 TechUI 在字体处理上的未来愿景。敬请期待！
设计理念 分而治之
针对中英文语言体系的巨大差异，我们采取了两种截然不同的加载策略，以确保最佳的资源利用率。
🇺🇸 英文字体：组合引入 (Bundled Strategy)
英文字体文件通常体积较小（单字重约 20kb - 50kb），因此我们倾向于提供风格化的合集。
- 整体/分组引入：您可以一次性引入一套完整的“科幻数字字体族”或“现代无衬线字体族”。
- 适用场景：Scifi 组件库中的数字跳动、大屏标题英文、装饰性字符。
🇨🇳 中文字体：按需引入 (On-Demand Strategy)
中文字库包含数万个字符，体积庞大（通常在 3MB - 10MB 之间）。为了防止页面加载阻塞，我们采取单一引入策略。
- 原子化封装：每个中文字体（甚至每个字重）都是独立的导出模块。
- 开源免费：我们只收录确认支持免费商用的开源中文字体（如思源黑体、霞鹜文楷、OPPO Sans 等），免除版权后顾之忧。
Tree-shaking 与性能
这是 @techui/fonts 最核心的技术特性。
传统的字体引入方式往往需要在 CSS 中写死 @font-face 链接，容易导致即便未使用的字体也被浏览器请求。而 TechUI Fonts 基于 ES Modules 构建：
- 构建剔除：凡是您在代码中未
import的字体，在 Vite/Webpack 打包过程中会被彻底 Tree-shaking (摇树优化) 掉。 - 零冗余：您的最终构建产物中，将只包含您实际使用到的那个字体文件，绝不多占用 1KB 的带宽。
拟定使用方式
注：以下 API 为设计预览，正式版可能会有所调整。
独立安装
由于字体属于“重资产”，且涉及主观审美，它不会作为 Admin 或 Prime 的默认依赖自动安装。您需要根据项目需求手动添加：
bash
npm install @techui/fonts引入英文字体组
javascript
// 引入 TechUI 专属的科幻数字字体组 (包含 regular, bold, mono 等)
// 这些字体通常较小，适合批量引入
import "@techui/fonts/english/scifi-numbers";引入单个中文字体
javascript
// 只引入 "霞鹜文楷" 的常规字重
// 只有这一个字体文件会被打包
import "@techui/fonts/chinese/lxgw-wenkai-regular";
// 或者引入 "思源黑体" 的 Bold 版本用于标题
import "@techui/fonts/chinese/source-han-sans-bold";在样式中使用
引入后，库会自动注入定义好的 CSS 变量或类名：
css
.my-title {
/* 使用预定义的字体族变量 */
font-family: var(--tui-font-scifi);
}
.my-content {
font-family: 'LXGW WenKai', sans-serif;
}为什么需要这个库？
在 TechUI 的“三位一体”架构中，字体是连接 Base、Scifi 和 Admin 的桥梁：
- 对于 Prime/Scifi：科幻大屏需要特殊的 OCR 字体、点阵字体来烘托氛围，但寻找合规且体积小的资源非常困难。
@techui/fonts将解决这一痛点。 - 对于 Admin：虽然系统默认字体已经足够好，但部分品牌化需求强烈的后台，依然需要特殊的中文标题字体来提升质感。