brandfy-tipografia-web

为 Web 准备字体

操作流程

• **计划与进度：**规划字体选择、许可证、文件、CSS 和测试。
• **权威来源：**查阅视觉方向、许可证以及 webfonts.md。
• **范围与幂等性：**未经兼容许可证授权，不要下载或重新分发字体。保留哈希值相同的现有文件。
• **验证：**检查许可证、MIME、字重、样式、加载、回退和可读性。
• **最终摘要：**记录字体系列、来源、许可证、文件、CSS 和待办事项。

流程

1. 根据语言、所需字符集和应用场景，为标题、正文、界面和代码选择字体系列。

2. 在支持条件和许可证允许时，优先使用可变 WOFF2。仅为实际使用的字重保留静态文件。

3. 在 .brandfy/fonts.json 中记录每个文件，包括直接 URL、许可证、作者、字重、样式和可选的哈希值。

4. 执行：

   node <caminho-da-skill>/scripts/download-fonts.mjs \
     --manifest .brandfy/fonts.json \
     --output brand/fonts
   

5. 使用 @font-face、font-display: swap、回退字体和字体系列令牌生成 brand/fonts/fonts.css。

6. 在手册中定义比例、line-height、字距、行长以及各用途的使用方式。

7. 测试重音符号、数字、符号、粗体、斜体和离线加载。

当字体为专有字体或由外部服务托管时，生成集成 CSS，但不要将文件复制到代码库中。

专家思路

根据任务选择字体：长篇阅读、界面、标题、数字、代码、语言和个性都需要不同的参数。比较字符覆盖范围、可读性、实用字重、度量指标、性能、许可证、回退方案和维护成本。与参考字体在美学上的相似性，无法弥补许可证缺失，也无法弥补字体系列无法正确显示重音符号或在小屏幕上表现不佳的问题。