From afcfcf45ee0fbf431fbe13e9cc63f0ea1645f1e7 Mon Sep 17 00:00:00 2001 From: xiaoxia Date: Mon, 14 Sep 2026 20:12:21 +0800 Subject: [PATCH] =?UTF-8?q?fix(frontend):=20#1896=20=E5=88=A0=E9=99=A4?= =?UTF-8?q?=E4=BE=B5=E6=9D=83=E5=8D=8E=E5=BA=B7=E5=AD=97=E4=BD=93=E4=BF=AE?= =?UTF-8?q?=E5=A4=8DPreviewPlayer=E5=AD=97=E4=BD=93=E6=98=A0=E5=B0=84=20(#?= =?UTF-8?q?1908)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix(frontend): #1896 删除侵权华康字体修复PreviewPlayer字体映射 问题： 1. "华康俪金黑"@font-face字体文件缺失（404）且有版权风险 2. PreviewPlayer直接用中文font_preset/font作为fontFamily，浏览器不识别 修改： - 删除"华康俪金黑"字体选项（FONT_OPTIONS+FONT_FAMILY_MAP）和@font-face声明 - 统一 editing-planner/constants/clipProperties.ts 和 subtitleStyle.ts 从 generate/constants 重新导出 FONT_OPTIONS，避免多处维护 - PreviewPlayer.tsx 标题/字幕 fontFamily 通过 getFontFamily() 映射为浏览器可识别字体栈 - FrontendPreviewPlayer.tsx 标题 fontFamily 同样通过 getFontFamily() 映射 - TitleStylePanel/PanelTitleConfig/SubtitleStylePanel 等组件因复用统一常量自动生效 - 最终保留5个字体：思源黑体、思源宋体、苹方、微软雅黑、楷体 - PingFang 别名保留在 FONT_FAMILY_MAP 中以兼容旧数据，但不在 UI 选项中显示 Refs #1896 --- apps/web/src/index.css | 9 --------- .../editing-planner/components/PreviewPlayer.tsx | 5 +++-- .../pages/editing-planner/constants/clipProperties.ts | 11 ++--------- .../pages/editing-planner/constants/subtitleStyle.ts | 11 ++--------- .../generate/components/FrontendPreviewPlayer.tsx | 4 +++- apps/web/src/pages/generate/constants.ts | 11 +---------- 6 files changed, 11 insertions(+), 40 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 349209f27..054ded766 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -25,15 +25,6 @@ body { background-color: var(--bg-secondary); } -/* ── 自定义字体 ── */ -@font-face { - font-family: "华康俪金黑"; - src: url("/fonts/DFLiJinHei-W8.ttf") format("truetype"); - font-weight: 700; - font-style: normal; - font-display: swap; -} - /* 滚动条 - V21 样式 */ ::-webkit-scrollbar { width: 8px; diff --git a/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx b/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx index 8bf4ed57f..b56abe469 100644 --- a/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx +++ b/apps/web/src/pages/editing-planner/components/PreviewPlayer.tsx @@ -5,6 +5,7 @@ import React from "react" import type { ClipData, ClipType } from "../types" import type { TitleConfig } from "@/api/template-editor" +import { getFontFamily } from "@/pages/generate/constants" interface SubtitleSettings { enabled: boolean @@ -80,7 +81,7 @@ const PreviewPlayer: React.FC = ({ className="ep-preview-title" style={{ fontSize: `${Math.min(titleConfig.font_size, 20)}px`, - fontFamily: titleConfig.font_preset, + fontFamily: getFontFamily(titleConfig.font_preset), fontWeight: "bold", fontStyle: "normal", textShadow: "2px 2px 4px rgba(0,0,0,0.5)", @@ -106,7 +107,7 @@ const PreviewPlayer: React.FC = ({ className="ep-preview-subtitle" style={{ fontSize: `${Math.min(subtitleSettings.size, 14)}px`, - fontFamily: subtitleSettings.font, + fontFamily: getFontFamily(subtitleSettings.font), top: subtitleSettings.position === "top" ? "8px" diff --git a/apps/web/src/pages/editing-planner/constants/clipProperties.ts b/apps/web/src/pages/editing-planner/constants/clipProperties.ts index fed8b70be..e4d6d9927 100644 --- a/apps/web/src/pages/editing-planner/constants/clipProperties.ts +++ b/apps/web/src/pages/editing-planner/constants/clipProperties.ts @@ -9,15 +9,8 @@ export const POSITION_OPTIONS = [ { value: "bottom", label: "底部" }, ] -export const FONT_OPTIONS = [ - "思源黑体", - "思源宋体", - "苹方", - "PingFang", - "微软雅黑", - "楷体", - "华康俪金黑", -] +// FONT_OPTIONS 统一从 generate/constants 导入，避免多处维护遗漏 +export { FONT_OPTIONS } from "@/pages/generate/constants" export const ANIMATION_OPTIONS = [ { value: "none", label: "无" }, diff --git a/apps/web/src/pages/editing-planner/constants/subtitleStyle.ts b/apps/web/src/pages/editing-planner/constants/subtitleStyle.ts index e2392e1f8..65aca8fcc 100644 --- a/apps/web/src/pages/editing-planner/constants/subtitleStyle.ts +++ b/apps/web/src/pages/editing-planner/constants/subtitleStyle.ts @@ -7,15 +7,8 @@ export const POSITION_OPTIONS = [ { value: "bottom", label: "底部" }, ] -export const FONT_OPTIONS = [ - "思源黑体", - "思源宋体", - "苹方", - "PingFang", - "微软雅黑", - "楷体", - "华康俪金黑", -] +// FONT_OPTIONS 统一从 generate/constants 导入 +export { FONT_OPTIONS } from "@/pages/generate/constants" export const ANIMATION_OPTIONS = [ { value: "none", label: "无" }, diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx index 5a6be9574..c0ca9a43a 100644 --- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx +++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx @@ -17,6 +17,8 @@ import type { EditPlanClip } from "@/api/template-editor" import { useSegmentScheduler, type PlaybackSegment } from "../hooks/useSegmentScheduler" import { usePreviewAudio } from "../hooks/usePreviewAudio" import { PreviewControls } from "./PreviewControls" +import { getFontFamily } from "../constants" + interface FrontendPreviewPlayerProps { assets: AssetItem[] videoRatio: string @@ -555,7 +557,7 @@ const FrontendPreviewPlayer: React.FC = ({ = { @@ -68,7 +60,6 @@ export const FONT_FAMILY_MAP: Record = { PingFang: '"PingFang SC", -apple-system, "Helvetica Neue", sans-serif', 微软雅黑: '"Microsoft YaHei", "PingFang SC", sans-serif', 楷体: '"KaiTi", "STKaiti", "DFKai-SB", serif', - 华康俪金黑: '"华康俪金黑", "DFLiJinHei-W8", "Source Han Sans SC", "Microsoft YaHei", sans-serif', } export function getFontFamily(font: string): string {