fix(font): 字体选择全场景修复 — AI数字人/Step3标题/封面编辑器 #2054
No Assignees
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: xiaoxia/xiaoxia-saas#2054
Reference in New Issue
Block a user
Delete Branch "fix/font-selection-20260926"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
问题
用户反馈软件中所有字体选择功能都不起作用——Step3标题设置字体选择、封面编辑器字体选择、AI数字人流程字体选择点了没反应。
根因
enableTemplates=true导致面板直接进入「标题模板网格」分支，完全不渲染字体/字号/位置等参数Tab（最严重，字体选择入口直接消失）。enableTemplates但未声明变量（TS 靠作用域巧合未报错），显式声明为false。@font-face/零字体文件，优设标题黑/阿里普惠体/抖音美好体/斗鱼追光体等自定义中文字体从未加载，浏览器直接 fallback 到 sans-serif，用户感知「切换字体没反应」。PRESET_FONTS的 family 用不存在的名字（DouYin MeiHaoTi/DouYu ZhuangGuangTi），与标题面板字体列表不同步。.xx-ce-canvas > div { pointer-events:none }把可拖拽的标题文字层也禁了（文字拖不动也是这个原因）。修复
index.html：引入 Google Fonts CDN（Noto Sans/Serif SC、ZCOOL 三款、马善政/龙藏/流江/志莽行书等中文书法字体）components/title/constants.ts：字体 family 栈补全兜底链；新增 5 款可加载字体（站酷小薇/马善政毛笔/龙藏/流江毛笔草/志莽行书）pages/generate/types/cover.ts：重写封面编辑器 PRESET_FONTS/SYSTEM_FONTS，新增 tag 字段区分 preset/hand/serif/sans/mono；移除不可用的「斗鱼追光体2.0」CoverEditorModal.tsx：字体下拉合并 ALL_FONTS、圆点按tag区分颜色；文字层显式pointer-events:auto保证可拖拽generate.css：精准选择装饰层禁用 pointer-events（不再一刀切）；新增 hand/serif/mono 三色圆点样式GeneratePage.tsx：显式const enableTemplates=falsePanelTitleConfig.tsx(AI数字人)：enableTemplates改为false，让AI数字人标题面板正确渲染「预设+参数Tab」TitleMiniPreview.tsx：监听document.fonts.ready，字体加载完成后重绘 Canvas验证
注意
优设标题黑/阿里普惠体/抖音美好体/斗鱼追光体为商业字体，无法通过开源 CDN 加载。family 栈已设置 Google Fonts 中视觉风格最接近的开源字体作为兜底：
若后续需要精确商用字体，需采购字体授权后放入
public/fonts/并加 @font-face 声明。根因分析： 1. AI数字人TitleStylePanel 传 enableTemplates=true 导致面板直接进入 「标题模板网格」分支，完全不渲染字体/字号/位置等参数Tab，用户看不到任何字体选择UI 2. 智能剪辑 GeneratePage 直接写了裸 prop `enableTemplates` 但没定义该变量 （TS不报错是因为之前 props 解构顺序导致引用了 formState 之外的全局？ 实际效果是传了 undefined，面板落回默认模式但易出错），显式声明为 false 3. 项目零 @font-face/零字体文件，优设标题黑/阿里普惠体/抖音美好体等自定义 字体从未加载，浏览器直接 fallback 到 sans-serif，用户感知「切换字体没反应」 4. CoverEditorModal 的 PRESET_FONTS family 用的是不通用的英文引号/错误名字 （'DouYin MeiHaoTi'/'DouYu ZhuangGuangTi' 实际不存在），且和标题面板字体列表 不同步，两边视觉不一致 5. CSS .xx-ce-canvas>div { pointer-events:none } 把可拖拽的标题文字层也禁了， 封面预览文字无法响应mousedown拖拽（这是「文字拖拽不动」的另一个原因） 6. TitleMiniPreview 用Canvas绘制，Web Font异步加载，首次draw时字体还没就绪 先用sans-serif画完不重绘，视觉上「选了字体没反应」 修复： - index.html: 引入Google Fonts CDN（Noto Sans SC / Noto Serif SC / ZCOOL 三款 / Ma Shan Zheng / Long Cang / Liu Jian Mao Cao / Zhi Mang Xing） - components/title/constants.ts: FONT_OPTIONS family栈补全兜底字体链； 新增「站酷小薇体/马善政毛笔/龙藏体/流江毛笔草/志莽行书」5款可加载字体 - pages/generate/types/cover.ts: 重写PRESET_FONTS/SYSTEM_FONTS，复用统一family栈， 新增tag字段区分preset/hand/serif/sans/mono；删去不可用的「斗鱼追光体2.0」 - CoverEditorModal.tsx: 字体下拉合并ALL_FONTS、圆点颜色按tag区分； 文字层显式 pointer-events:auto 保证可拖拽；清理未使用import - generate.css: 精准选择装饰层禁用pointer-events（不再一刀切xx-ce-canvas>div）； 新增hand/serif/mono三色字体圆点 - GeneratePage.tsx: 显式 const enableTemplates=false，JSX传参改为 enableTemplates={enableTemplates} - PanelTitleConfig.tsx(AI数字人): enableTemplates 改 false，让AI数字人 标题面板正确渲染「预设+参数Tab」，字体/描边/阴影/排版参数全部可见 - TitleMiniPreview.tsx: useEffect里监听document.fonts.ready，字体加载完成后 重绘一次Canvas，避免首帧fallback sans-serif🚀 预览环境已部署
CI全绿，自动审批通过。
CI全绿，自动审批通过。
🗑️ 预览环境已清理
PR #2054 已关闭或合并，对应的预览环境已被清理。