主题与字体

主题统一控制作品的颜色、字体、圆角、间距和阴影。先选一套接近目标的主题,再微调,比逐个组件设置更容易保持一致。

选择主题并保存自己的版本

在工作台点击「主题样式」进入主题工作室。

主题工作室:选择起点,调整后保存自己的主题
主题工作室:选择起点,调整后保存自己的主题点击图片放大
查看 10 套内置主题与风格
内置主题风格
Pure纯净白
Mist雾灰商务
Graphite深灰暗色
Midnight午夜蓝
Paper暖纸白
Sage鼠尾草绿
Lavender淡紫
Blueprint冰蓝技术
Mono黑白极简
Sandstone沙岩杂志
  1. 点击主题卡片作为起点,可筛选浅色、深色或「我的主题」。
  2. 向下滚动,在控制区调整名称、颜色、明暗模式、圆角、间距、字号、图标和阴影。
  3. 在预览中试用输入框、按钮和选择器,检查边框、焦点和禁用状态。
  4. 查看文字与控件的对比度提示,避免文字和背景太接近。
  5. 点击「保存为我的主题」。修改已有自定义主题时显示「保存主题」;需要保留原版可「复制主题」。

「还原修改」恢复本轮编辑前的主题。主题也可导出为 JSON,或通过导入区载入别人分享的主题。

将主题用到作品

返回作品,在预览的主题选择器中选择自己的主题,确认效果后保存项目。主题工作室的试色不会直接改掉文章中已经保存的组件;项目保存的主题配置才决定其公开展示。

需要全站不同位置使用不同风格时,可以给不同项目选择不同主题。保存新的主题库配置后,也应在相关项目中重新选择、核对并保存。

让 AI 设计主题

在主题工作室找到「AI 主题设计」,描述要调整的风格,例如:

为技术博客做一套纸张感浅色主题。
背景偏暖白,正文深灰,主色使用克制的墨绿色。
圆角偏小,边框清晰,表单有明显焦点,保持正文对比度。

生成后先查看预览和对比度,再点击「使用 AI 主题」。需要继续手动调整时直接修改控制区,最后保存到主题库。AI 主题同样使用 AI Foundation 的模型与凭据;也可通过外部 AI 连接入口生成并导入。

导入自己的字体

从工作台「字体管理」,或主题字体选择器的管理入口打开字体库,点击「添加字体」。按手头的资源选择导入方式。

字体管理:选择导入方式,填写 CSS 地址,试读与搜索字体
字体管理:选择导入方式,填写 CSS 地址,试读与搜索字体点击图片放大
  1. 选择「CSS 链接」。
  2. 粘贴字体服务提供的 CSS 地址,应返回包含 @font-face 的 CSS。
  3. 点击「识别字体」,检查识别到的字体家族、字重和分包信息。
  4. 保存字体,再回主题选择器使用。

导入的是字体定义和来源,浏览器按实际需要加载字体文件。主题中选好字体后,保存主题;回到作品应用并保存,公开展示才会使用它。

中文分包字体

保留字体 CSS 中的 unicode-range,浏览器会按实际文字请求对应分包。导入 CSS 不会把本地字体文件一起上传。

字体多了如何管理

使用搜索框按字体名称筛选,调整「试用文字」检查中文、英文和数字的效果。分包字体只在需要的字形范围加载,不需要把所有字形一次下载。

删除字体库条目不等于从所有已保存作品中撤销字体:作品可能保留自己的配置快照,但原字体 URL 仍需持续可访问。字体来源失效时,浏览器会使用回退字体。

字体不生效时

字体没有变化时,按顺序排查

可逐项勾选核对,离开本页后不保留勾选。

主题准备好后,可在 市场与投稿 发布为主题作品,方便其他用户复用。