Skip to content

主题、字体与样式 ​

主题、字体和样式共同决定项目视觉约束。它们不是单页装饰,而是面向团队复用的设计系统资产。

当前对象边界 ​

  • 主题:维护品牌色、Logo、页面图标、默认字体绑定和项目视觉基础配置;主题的标题、正文和代码字体绑定到字体族。
  • 字体注册:把字体资源转为页面和组件可引用的字体声明,字体文件按字体族归组管理。
  • 样式库:沉淀页面展示配置、Markdown 样式规范和通用排版约束。

主题库 ​

主题适合保存组织级或项目级视觉规范。创建主题时,应明确适用场景、主色、辅助色、背景策略、Logo 资源和默认字体。

字体注册 ​

字体注册依赖字体资源。上传字体后,需要完成字体声明配置,页面和组件才能稳定引用。生产部署时还要确认字体资源可以被 Runtime 正确加载。

按字体族管理 ​

字体以字体族(Family)为管理单元,一个字体族下可以包含多个字体文件(Face):

  • 上传如 SourceHanSans-Regular、SourceHanSans-Bold 等多个文件时,平台会自动剥离字重、样式后缀,把它们归入同一个字体族,并推断各自的字重和样式。
  • 同一字体族内,页面渲染时浏览器会根据文本的粗细和斜体自动匹配对应字体文件,无需在页面里手动切换字体。
  • 可变字体(Variable Font)单个文件即可声明字重范围(如 100 900),注册时在字体编辑弹窗开启“可变字体(字重范围)”开关并填写最小、最大字重。
  • 字体族可以重命名;字体文件也可以在编辑时修改所属字体族,即把文件移动到另一个族。

主题的字体槽位可以使用平台内置字体、跟随系统或绑定工作空间字体族。平台内置字体会随页面一起加载,是新主题的默认选择,可让浏览器预览、服务端截图和构建页面保持一致的字形度量与换行;“跟随系统”会使用当前设备字体,不同操作系统或截图容器之间可能出现字形、换行和高度差异。绑定工作空间字体族时,预览和构建会下发该字体族下全部启用的字体文件。

样式库 ​

样式库适合保存不同内容形态的排版约束,例如报告页、图文卡片、数据看板、演讲页。样式说明应面向人和 AI 都可理解,避免只写抽象口号。

离线包 ​

主题、字体、样式和组件可能共同构成一个可迁移的设计系统包。迁移前应检查关联资源、字体文件和组件依赖,避免目标环境缺失素材。

推荐使用流程 ​

  1. 先上传品牌素材和字体资源。
  2. 注册字体并创建主题。
  3. 补充样式库说明。
  4. 创建或发布与主题匹配的组件。
  5. 在项目中应用主题和样式,再开始页面创作。

与 AI 协作 ​

AI 会更容易遵循明确的主题、字体和样式约束。让 AI 改版前,应说明目标主题、页面比例、参考组件和禁用风格。

注意事项 ​

  • 不要把临时页面样式沉淀为全局样式。
  • 字体资源变更会影响所有引用页面,替换前需要检查范围。
  • 样式说明应具体到布局、密度、色彩和可读性要求。