fix(frontend): #1896 删除侵权华康字体修复PreviewPlayer字体映射 (#1908)

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
2026-09-14 20:12:21 +08:00
parent 939a49d1d4
commit afcfcf45ee
6 changed files with 11 additions and 40 deletions
@@ -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;
@@ -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<PreviewPlayerProps> = ({
              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<PreviewPlayerProps> = ({
              className="ep-preview-subtitle"
              style={{
                fontSize: `${Math.min(subtitleSettings.size, 14)}px`,
-                fontFamily: subtitleSettings.font,
+                fontFamily: getFontFamily(subtitleSettings.font),
                top:
                  subtitleSettings.position === "top"
                    ? "8px"
@@ -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: "无" },
@@ -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: "无" },
@@ -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<FrontendPreviewPlayerProps> = ({
            <span
              style={{
                fontSize: `${titleFontSizePx}px`,
-                fontFamily: titleSettings.font || "思源黑体",
+                fontFamily: getFontFamily(titleSettings.font || "思源黑体"),
                color: titleSettings.color || "#ffffff",
                fontWeight: titleSettings.bold ? 700 : 400,
                fontStyle: titleSettings.italic ? "italic" : "normal",
@@ -50,15 +50,7 @@ export const POSITION_OPTIONS = [
 ]

 /* ── 标题字体选项 ── */
-export const FONT_OPTIONS = [
-  "思源黑体",
-  "思源宋体",
-  "苹方",
-  "PingFang",
-  "微软雅黑",
-  "楷体",
-  "华康俪金黑",
-]
+export const FONT_OPTIONS = ["思源黑体", "思源宋体", "苹方", "微软雅黑", "楷体"]

 /* ── 标题字体 CSS font-family 映射（中文显示名 → 浏览器可识别的字体栈） ── */
 export const FONT_FAMILY_MAP: Record<string, string> = {
@@ -68,7 +60,6 @@ export const FONT_FAMILY_MAP: Record<string, string> = {
  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 {