From d19fa951eeea180f5993f961da82014f240cebf3 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Sat, 22 Aug 2026 18:23:46 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=A0=87=E9=A2=98/=E4=B8=8D=E6=8D=A2?=
 =?UTF-8?q?=E8=A1=8C+=E5=AD=97=E4=BD=93=E6=98=A0=E5=B0=84=E8=A1=A8?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../generate/components/PreviewVideoPanel.tsx     | 10 ++++++++--
 .../components/title/TitlePresetsGrid.tsx         |  3 ++-
 apps/web/src/pages/generate/constants.ts          | 15 +++++++++++++++
 3 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index a45fc601c..ee03f16b5 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -16,6 +16,7 @@ import { LoadingOutlined } from "@ant-design/icons"
 import type { AssetItem } from "@/api/assets"
 import type { EditingTemplate } from "@/api/editing-planner"
 import type { TitleSettings } from "../types"
+import { getFontFamily } from "../constants"
 import FrontendPreviewPlayer from "./FrontendPreviewPlayer"
 
 interface PreviewVideoPanelProps {
@@ -87,7 +88,7 @@ function buildTitleStyle(settings: TitleSettings, containerHeight: number): Reac
       : (Math.min(settings.size, 96) / ASS_VIDEO_HEIGHT) * 400 // fallback
 
   const base: React.CSSProperties = {
-    fontFamily: settings.font || "思源黑体",
+    fontFamily: getFontFamily(settings.font),
     fontSize: `${fontSizePx}px`,
     color: settings.color || "#ffffff",
     fontWeight: settings.bold ? 700 : 400,
@@ -176,7 +177,12 @@ const TitleOverlay: React.FC<{ titleSettings: TitleSettings }> = ({ titleSetting
           position: "absolute",
         }}
       >
-        {displayTitle}
+        {displayTitle.split("/").map((part, i) => (
+          <span key={i}>
+            {i > 0 && <br />}
+            {part}
+          </span>
+        ))}
       </div>
     </div>
   )
diff --git a/apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx b/apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx
index 424a9018b..90b8bd720 100644
--- a/apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx
+++ b/apps/web/src/pages/generate/components/title/TitlePresetsGrid.tsx
@@ -2,6 +2,7 @@
  * 标题预设样式网格
  */
 import React from "react"
+import { getFontFamily } from "../../constants"
 
 interface TitlePresetItem {
   key: string
@@ -35,7 +36,7 @@ const TitlePresetsGrid: React.FC<TitlePresetsGridProps> = ({
           >
             <span
               className="xx-title-preset-preview-text"
-              style={{ ...p.previewStyle, ...(fontFamily ? { fontFamily } : {}) }}
+              style={{ ...p.previewStyle, fontFamily: getFontFamily(fontFamily || "思源黑体") }}
             >
               标题
             </span>
diff --git a/apps/web/src/pages/generate/constants.ts b/apps/web/src/pages/generate/constants.ts
index 74a7a3bf9..6810c6c49 100644
--- a/apps/web/src/pages/generate/constants.ts
+++ b/apps/web/src/pages/generate/constants.ts
@@ -56,6 +56,21 @@ export const FONT_OPTIONS = [
   "华康俪金黑",
 ]
 
+/* ── 标题字体 CSS font-family 映射（中文显示名 → 浏览器可识别的字体栈） ── */
+export const FONT_FAMILY_MAP: Record<string, string> = {
+  思源黑体: '"Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif',
+  思源宋体: '"Source Han Serif SC", "Noto Serif SC", "Songti SC", "SimSun", serif',
+  苹方: '"PingFang SC", -apple-system, "Helvetica Neue", sans-serif',
+  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 {
+  return FONT_FAMILY_MAP[font] || FONT_FAMILY_MAP["思源黑体"]
+}
+
 /* ── 标题样式预设 ── */
 export const TITLE_PRESETS = [
   {