fix: 标题/不换行+字体映射表修复

2026-08-22 18:23:46 +08:00
parent e928068efd
commit d19fa951ee
3 changed files with 25 additions and 3 deletions
@@ -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>
  )
@@ -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>
@@ -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 = [
  {