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 = [
   {