From bdd7299a910bdae056ff76e560414184fc331036 Mon Sep 17 00:00:00 2001
From: d4yt1m3 <d4yt1m3151@gmail.com>
Date: Thu, 22 Oct 2026 18:11:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=AD=8C=E8=AF=8D?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E5=AF=BC=E5=87=BA=E6=9C=AA=E6=B2=BF=E7=94=A8?=
 =?UTF-8?q?=E5=AD=97=E4=BD=93=E9=85=8D=E7=BD=AE=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modals/CopyLyricsDialog.vue |  12 +++
 src/utils/lyric/poster.spec.ts             | 104 +++++++++++++++++++++
 src/utils/lyric/poster.ts                  |  97 +++++++++++++++----
 3 files changed, 195 insertions(+), 18 deletions(-)
 create mode 100644 src/utils/lyric/poster.spec.ts

diff --git a/src/components/modals/CopyLyricsDialog.vue b/src/components/modals/CopyLyricsDialog.vue
index 70cc8a35f..8adcb8f5f 100644
--- a/src/components/modals/CopyLyricsDialog.vue
+++ b/src/components/modals/CopyLyricsDialog.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useSettingsStore } from "@/stores/settings";
 import { useMediaStore } from "@/stores/media";
 import { useThemeStore } from "@/stores/theme";
 import { useCopyText } from "@/composables/useCopyText";
@@ -12,6 +13,7 @@ const emit = defineEmits<{ "update:open": [value: boolean] }>();
 const { t } = useI18n();
 const media = useMediaStore();
 const theme = useThemeStore();
+const settings = useSettingsStore();
 const { copy } = useCopyText();
 
 /** 复制内容过滤项 */
@@ -29,6 +31,7 @@ const displayLyrics = computed(() =>
     .filter((line) => !line.isBG)
     .map((line, index) => ({
       index,
+      language: line.language,
       text: line.words.map((word) => word.word).join(""),
       translation: line.translatedLyric || "",
       romaji: line.romanLyric || line.words.map((word) => word.romanWord ?? "").join(""),
@@ -130,11 +133,20 @@ const handleExport = async (): Promise<void> => {
         .filter((line) => pickedSet.value.has(line.index))
         .map((line) => ({
           text: line.text,
+          language: line.language,
           translation: showTranslation.value && line.translation ? line.translation : undefined,
           romaji: showRomaji.value && line.romaji ? line.romaji : undefined,
           duet: line.duet,
         })),
       fallbackColor: theme.coverColor,
+      fonts: {
+        global: settings.appearance.fontFamily,
+        lyric: settings.lyric.fontFamily,
+        chinese: settings.lyric.fontFamilyChinese,
+        japanese: settings.lyric.fontFamilyJapanese,
+        korean: settings.lyric.fontFamilyKorean,
+        latin: settings.lyric.fontFamilyLatin,
+      },
     });
     const artist = track.artists.map((item) => item.name).join(", ");
     const suffixName = t("player.copyLyric.fileSuffix");
diff --git a/src/utils/lyric/poster.spec.ts b/src/utils/lyric/poster.spec.ts
new file mode 100644
index 000000000..3a35a0bc9
--- /dev/null
+++ b/src/utils/lyric/poster.spec.ts
@@ -0,0 +1,104 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { Track } from "@shared/types/player";
+import { createLyricPoster } from "./poster";
+
+vi.mock("@/utils/color", () => ({ hexToRgb: () => "20, 20, 28" }));
+
+/**
+ * 捕获文字测量与绘制时的字体，模拟无封面的图片导出
+ * @returns 字体加载桩、测量记录和绘制记录
+ */
+const setupCanvas = () => {
+  const measured: Array<{ text: string; font: string }> = [];
+  const drawn: Array<{ text: string; font: string }> = [];
+  const load = vi.fn().mockResolvedValue([]);
+  Object.defineProperty(document, "fonts", { configurable: true, value: { load } });
+  const context = {
+    font: "",
+    scale: vi.fn(),
+    fillRect: vi.fn(),
+    measureText: (text: string) => {
+      measured.push({ text, font: context.font });
+      return { width: text.length * (context.font.includes('"Wide"') ? 100 : 20) };
+    },
+    fillText: (text: string) => drawn.push({ text, font: context.font }),
+  };
+  vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockReturnValue(
+    context as unknown as CanvasRenderingContext2D,
+  );
+  vi.spyOn(HTMLCanvasElement.prototype, "toBlob").mockImplementation((callback) => {
+    callback(new Blob(["png"], { type: "image/png" }));
+  });
+  return { load, measured, drawn };
+};
+
+const track = { title: "歌名", artists: [{ name: "歌手" }], source: "netease" } as Track;
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  Reflect.deleteProperty(document, "fonts");
+});
+
+describe("歌词海报字体", () => {
+  it("沿用分语言、歌词和全局字体，并在测量与绘制时保持一致", async () => {
+    const { measured, drawn } = setupCanvas();
+    await createLyricPoster({
+      track,
+      fonts: {
+        global: '"Global"',
+        lyric: '"Lyrics"',
+        japanese: '"Japanese"',
+        chinese: '"Chinese"',
+        latin: '"Latin"',
+      },
+      lines: [{ text: "君の歌", language: "ja", translation: "你的歌", romaji: "kimi no uta" }],
+    });
+    for (const [text, family] of [
+      ["君の歌", "Japanese"],
+      ["你的歌", "Chinese"],
+      ["kimi no uta", "Latin"],
+    ]) {
+      const rendered = drawn.find((entry) => entry.text === text)!;
+      expect(rendered.font).toContain(`"${family}", "Lyrics", "Global"`);
+      expect(measured.some((entry) => entry.text === text && entry.font === rendered.font)).toBe(
+        true,
+      );
+    }
+    expect(drawn.find((entry) => entry.text === "歌名")?.font).toContain('"Global"');
+  });
+
+  it("未设置歌词字体时使用全局字体", async () => {
+    const { drawn } = setupCanvas();
+    await createLyricPoster({
+      track,
+      fonts: { global: '"WenKai"' },
+      lines: [{ text: "中文歌词" }],
+    });
+    expect(drawn.find((entry) => entry.text === "中文歌词")?.font).toMatch(/^bold 34px "WenKai",/);
+  });
+
+  it("修改歌词字体后重新计算长句换行，不沿用上次字体", async () => {
+    const { drawn } = setupCanvas();
+    const text = "这是用于验证不同字体换行的长句";
+    await createLyricPoster({ track, fonts: { lyric: '"Wide"' }, lines: [{ text }] });
+    const wideLines = drawn.filter((entry) => entry.font.startsWith('bold 34px "Wide"'));
+    expect(wideLines.length).toBeGreaterThan(1);
+    expect(wideLines.map((entry) => entry.text).join("")).toBe(text);
+    drawn.length = 0;
+    await createLyricPoster({ track, lines: [{ text }] });
+    expect(drawn.find((entry) => entry.text === text)?.font).not.toContain('"Wide"');
+  });
+
+  it("字体加载完成前不测量或绘制文字", async () => {
+    const { load, measured, drawn } = setupCanvas();
+    const pending = Promise.withResolvers<FontFace[]>();
+    load.mockReturnValue(pending.promise);
+    const result = createLyricPoster({ track, lines: [{ text: "等待字体" }] });
+    await vi.waitFor(() => expect(load).toHaveBeenCalled());
+    expect(measured).toEqual([]);
+    expect(drawn).toEqual([]);
+    pending.resolve([]);
+    expect((await result).type).toBe("image/png");
+    expect(drawn.some((entry) => entry.text === "等待字体")).toBe(true);
+  });
+});
diff --git a/src/utils/lyric/poster.ts b/src/utils/lyric/poster.ts
index 796e07095..e3a03dc42 100644
--- a/src/utils/lyric/poster.ts
+++ b/src/utils/lyric/poster.ts
@@ -1,9 +1,12 @@
+import { applyLyricLanguages, type LyricLanguage, type LyricLine } from "lyric-kit";
 import type { Track } from "@shared/types/player";
 import { hexToRgb } from "@/utils/color";
 
 /** 海报中的一行歌词 */
 export interface LyricPosterLine {
   text: string;
+  /** 原文语言，沿用播放器的识别结果 */
+  language?: LyricLanguage;
   /** 翻译 */
   translation?: string;
   /** 音译 */
@@ -17,6 +20,15 @@ export interface LyricPosterOptions {
   lines: LyricPosterLine[];
   /** 无封面时的背景色 HEX，可空 */
   fallbackColor?: string | null;
+  /** 沿用现有设置的 CSS 字体族列表 */
+  fonts?: {
+    global?: string;
+    lyric?: string;
+    chinese?: string;
+    japanese?: string;
+    korean?: string;
+    latin?: string;
+  };
 }
 
 const SCALE = 3;
@@ -27,12 +39,6 @@ const PAD_TOP = 64;
 const PAD_BOTTOM = 30;
 
 const FONT_STACK = '-apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif';
-const LYRIC_FONT = `bold 34px ${FONT_STACK}`;
-const TRANS_FONT = `24px ${FONT_STACK}`;
-const ROMAJI_FONT = `italic 22px ${FONT_STACK}`;
-const TITLE_FONT = `bold 28px ${FONT_STACK}`;
-const ARTIST_FONT = `22px ${FONT_STACK}`;
-const MARK_FONT = `600 15px ${FONT_STACK}`;
 
 const LYRIC_LH = 48;
 const TRANS_LH = 34;
@@ -142,11 +148,47 @@ const drawCovered = (
 
 /**
  * 把选中歌词绘制成一张海报 PNG（自动解析当前封面）
- * @param options - 曲目、歌词行、无封面时的背景色
+ * @param options - 曲目、歌词行、背景色和导出字体配置
  * @returns PNG Blob
  */
 export const createLyricPoster = async (options: LyricPosterOptions): Promise<Blob> => {
-  const { track, lines, fallbackColor } = options;
+  const { track, lines, fallbackColor, fonts = {} } = options;
+  const globalFont = `${fonts.global ? `${fonts.global}, ` : ""}${FONT_STACK}`;
+  const lyricFont = `${fonts.lyric ? `${fonts.lyric}, ` : ""}${globalFont}`;
+
+  /**
+   * 按文本语言解析字体，保证测量和绘制使用相同字体
+   * @param text - 原文、翻译或音译
+   * @param style - Canvas 字号与字形
+   * @param language - 播放器已识别的原文语言
+   * @returns 可直接赋给 Canvas 的字体描述
+   */
+  const fontForText = (text: string, style: string, language?: LyricLanguage): string => {
+    if (!language) {
+      const detected: LyricLine[] = [
+        {
+          words: [{ word: text, startTime: 0, endTime: 0 }],
+          translatedLyric: "",
+          romanLyric: "",
+          startTime: 0,
+          endTime: 0,
+          isBG: false,
+          isDuet: false,
+        },
+      ];
+      applyLyricLanguages(detected);
+      language = detected[0].language;
+    }
+    const family = language
+      ? {
+          "zh-CN": fonts.chinese,
+          ja: fonts.japanese,
+          ko: fonts.korean,
+          "und-Latn": fonts.latin,
+        }[language]
+      : undefined;
+    return `${style} ${family ? `${family}, ` : ""}${lyricFont}`;
+  };
   const title = track.title;
   const artist = track.artists.map((item) => item.name).join(" / ");
   const coverDataUrl = await resolveCoverDataUrl(track);
@@ -156,15 +198,34 @@ export const createLyricPoster = async (options: LyricPosterOptions): Promise<Bl
   const ctx = canvas.getContext("2d");
   if (!ctx) throw new Error("无法创建画布上下文");
 
+  // 字体就绪后再测量，避免首次导出使用回退字体的宽度
+  await Promise.all([
+    document.fonts.load(`bold 28px ${globalFont}`, title),
+    document.fonts.load(`22px ${globalFont}`, artist),
+    document.fonts.load(`600 15px ${globalFont}`, "Made by SPlayer Next"),
+    ...lines.flatMap((line) => [
+      document.fonts.load(fontForText(line.text, "bold 34px", line.language), line.text),
+      ...(line.translation
+        ? [document.fonts.load(fontForText(line.translation, "24px"), line.translation)]
+        : []),
+      ...(line.romaji
+        ? [document.fonts.load(fontForText(line.romaji, "italic 22px"), line.romaji)]
+        : []),
+    ]),
+  ]);
+
   // 预折行并量算高度
   const layout = lines.map((line) => {
-    ctx.font = LYRIC_FONT;
+    const mainFont = fontForText(line.text, "bold 34px", line.language);
+    const translationFont = fontForText(line.translation ?? "", "24px");
+    const romajiFont = fontForText(line.romaji ?? "", "italic 22px");
+    ctx.font = mainFont;
     const main = wrapText(ctx, line.text || " ", CONTENT_WIDTH);
-    ctx.font = TRANS_FONT;
+    ctx.font = translationFont;
     const translation = line.translation ? wrapText(ctx, line.translation, CONTENT_WIDTH) : [];
-    ctx.font = ROMAJI_FONT;
+    ctx.font = romajiFont;
     const romaji = line.romaji ? wrapText(ctx, line.romaji, CONTENT_WIDTH) : [];
-    return { main, translation, romaji, duet: !!line.duet };
+    return { main, translation, romaji, mainFont, translationFont, romajiFont, duet: !!line.duet };
   });
 
   let lyricsHeight = 0;
@@ -212,10 +273,10 @@ export const createLyricPoster = async (options: LyricPosterOptions): Promise<Bl
     titleX = PAD_X + THUMB + THUMB_TEXT_GAP;
   }
   ctx.fillStyle = "#ffffff";
-  ctx.font = TITLE_FONT;
+  ctx.font = `bold 28px ${globalFont}`;
   ctx.fillText(title, titleX, PAD_TOP + 10);
   ctx.fillStyle = "rgba(255, 255, 255, 0.7)";
-  ctx.font = ARTIST_FONT;
+  ctx.font = `22px ${globalFont}`;
   ctx.fillText(artist, titleX, PAD_TOP + 44);
 
   // 歌词
@@ -226,7 +287,7 @@ export const createLyricPoster = async (options: LyricPosterOptions): Promise<Bl
     const textX = block.duet ? WIDTH - PAD_X : PAD_X;
     ctx.textAlign = block.duet ? "right" : "left";
     ctx.fillStyle = "#ffffff";
-    ctx.font = LYRIC_FONT;
+    ctx.font = block.mainFont;
     for (const text of block.main) {
       ctx.fillText(text, textX, y);
       y += LYRIC_LH;
@@ -234,7 +295,7 @@ export const createLyricPoster = async (options: LyricPosterOptions): Promise<Bl
     if (block.translation.length) {
       y += SUBLINE_GAP;
       ctx.fillStyle = "rgba(255, 255, 255, 0.6)";
-      ctx.font = TRANS_FONT;
+      ctx.font = block.translationFont;
       for (const text of block.translation) {
         ctx.fillText(text, textX, y);
         y += TRANS_LH;
@@ -243,7 +304,7 @@ export const createLyricPoster = async (options: LyricPosterOptions): Promise<Bl
     if (block.romaji.length) {
       y += SUBLINE_GAP;
       ctx.fillStyle = "rgba(255, 255, 255, 0.45)";
-      ctx.font = ROMAJI_FONT;
+      ctx.font = block.romajiFont;
       for (const text of block.romaji) {
         ctx.fillText(text, textX, y);
         y += ROMAJI_LH;
@@ -253,7 +314,7 @@ export const createLyricPoster = async (options: LyricPosterOptions): Promise<Bl
 
   // 底部水印（居中）
   ctx.fillStyle = "rgba(255, 255, 255, 0.4)";
-  ctx.font = MARK_FONT;
+  ctx.font = `600 15px ${globalFont}`;
   ctx.textAlign = "center";
   ctx.fillText("Made by SPlayer Next", WIDTH / 2, totalHeight - PAD_BOTTOM - WATERMARK_H);