主题、字体与样式
主题、字体和样式共同决定项目视觉约束。它们不是单页装饰,而是面向团队复用的设计系统资产。
当前对象边界
- 主题:维护品牌色、Logo、页面图标、默认字体绑定和项目视觉基础配置;主题的标题、正文和代码字体绑定到字体族。
- 字体注册:把字体资源转为页面和组件可引用的字体声明,字体文件按字体族归组管理。
- 样式库:沉淀页面展示配置、Markdown 样式规范和通用排版约束。
主题库
主题适合保存组织级或项目级视觉规范。创建主题时,应明确适用场景、主色、辅助色、背景策略、Logo 资源和默认字体。
字体注册
字体注册依赖字体资源。上传字体后,需要完成字体声明配置,页面和组件才能稳定引用。生产部署时还要确认字体资源可以被 Runtime 正确加载。
按字体族管理
字体以字体族(Family)为管理单元,一个字体族下可以包含多个字体文件(Face):
- 上传如
SourceHanSans-Regular、SourceHanSans-Bold等多个文件时,平台会自动剥离字重、样式后缀,把它们归入同一个字体族,并推断各自的字重和样式。 - 同一字体族内,页面渲染时浏览器会根据文本的粗细和斜体自动匹配对应字体文件,无需在页面里手动切换字体。
- 可变字体(Variable Font)单个文件即可声明字重范围(如
100 900),注册时在字体编辑弹窗开启“可变字体(字重范围)”开关并填写最小、最大字重。 - 字体族可以重命名;字体文件也可以在编辑时修改所属字体族,即把文件移动到另一个族。
主题的字体槽位可以使用平台内置字体、跟随系统或绑定工作空间字体族。平台内置字体会随页面一起加载,是新主题的默认选择,可让浏览器预览、服务端截图和构建页面保持一致的字形度量与换行;“跟随系统”会使用当前设备字体,不同操作系统或截图容器之间可能出现字形、换行和高度差异。绑定工作空间字体族时,预览和构建会下发该字体族下全部启用的字体文件。
样式库
样式库适合保存不同内容形态的排版约束,例如报告页、图文卡片、数据看板、演讲页。样式说明应面向人和 AI 都可理解,避免只写抽象口号。
离线包
主题、字体、样式和组件可能共同构成一个可迁移的设计系统包。迁移前应检查关联资源、字体文件和组件依赖,避免目标环境缺失素材。
推荐使用流程
- 先上传品牌素材和字体资源。
- 注册字体并创建主题。
- 补充样式库说明。
- 创建或发布与主题匹配的组件。
- 在项目中应用主题和样式,再开始页面创作。
与 AI 协作
AI 会更容易遵循明确的主题、字体和样式约束。让 AI 改版前,应说明目标主题、页面比例、参考组件和禁用风格。
注意事项
- 不要把临时页面样式沉淀为全局样式。
- 字体资源变更会影响所有引用页面,替换前需要检查范围。
- 样式说明应具体到布局、密度、色彩和可读性要求。