UnoCSS 预设 Web 字体本地化方案探讨

在 UnoCSS 项目中使用 presetWebFonts 预设时，开发者可以通过简单的配置快速引入 Google Fonts 等网络字体。然而，这种基于 CDN 的字体加载方式对于需要在离线环境或本地网络运行的 Web 应用来说存在明显局限性。

现有机制分析

当前 presetWebFonts 的工作原理是生成 @font-face 规则，其中包含指向 Google Fonts CDN 的 URL。这种设计虽然简单高效，但存在以下问题：

1. 依赖性问题：应用完全依赖外部 CDN 服务的可用性
2. 离线不可用：在无网络连接的环境下字体无法加载
3. 隐私顾虑：某些场景下不希望向第三方发送请求

解决方案设计

理想的解决方案应该提供字体文件本地下载功能，使生成的 CSS 引用项目内的字体资源。参考 vite-plugin-webfont-dl 插件的实现思路，我们可以在 presetWebFonts 中增加以下功能：

1. 全局下载开关：通过 downloadLocally 参数控制是否默认下载所有字体
2. 字体级覆盖：允许为单个字体单独设置下载行为
3. 文件管理：自动处理字体文件的下载、存储和版本控制

实现示例

配置示例展示了灵活的下载控制方式：

presetWebFonts({
  downloadLocally: true, // 全局启用
  fonts: {
    vibes: 'Vibes', // 继承全局设置
    lobster: [
      {
        name: 'Lobster',
        provider: 'none',
        downloadLocally: false // 单独禁用
      }
    ]
  }
})

预期生成的 CSS 将使用本地路径：

@font-face {
  font-family: Vibes;
  src: url(assets/font-vibes-QdVYSTsmIB6tmYd1FJfcuA.woff2) format("woff2");
}

技术考量

实现这一功能需要注意以下技术细节：

1. 文件命名：应采用包含哈希值的文件名确保唯一性
2. 缓存策略：避免重复下载相同版本的字体
3. 构建集成：与 Vite/Rollup 等构建工具无缝协作
4. 格式支持：正确处理 woff2、woff 等多种字体格式

社区协作

UnoCSS 团队已明确表示欢迎社区贡献这一功能。开发者可以基于现有预设进行扩展，实现字体下载逻辑，同时保持与 UnoCSS 核心的兼容性。这种增强既能满足离线应用需求，又不会影响现有在线应用的使用体验。

对于需要此功能的企业或开发者，建议关注项目进展或考虑参与实现，共同完善 UnoCSS 的字体管理能力。