refactor: dynamic generation font and CSS rules

kirklin · Aug 30, 2023 · 9dc4eda · 9dc4eda
1 parent 37913ef
commit 9dc4eda
Show file tree

Hide file tree

Showing 2 changed files with 206 additions and 122 deletions.
diff --git a/src/defaultChineseFonts.ts b/src/defaultChineseFonts.ts
@@ -1,111 +1,206 @@
+const macosSimplifiedChinese = ["-apple-system", "BlinkMacSystemFont", "PingFang SC", "Hiragino Sans GB", "Heiti SC"];
+const macosTraditionalChinese = ["-apple-system", "BlinkMacSystemFont", "PingFang SC"];
+const windowsSimplifiedChinese = ["Microsoft YaHei"];
+const windowsTraditionalChinese = ["Microsoft Jhenghei"];
+const linuxSimplifiedChinese = ["system-ui", "Ubuntu", "Droid Sans", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans"];
+const linuxTraditionalChinese = ["system-ui", "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans"];
+
+export type FontType = "chinese" | "helvetica" | "italics" | "song" | "imitation-song" | "new-song" | "li";
+/**
+ * Generates a list of fonts for the specified character type and font type, with optional fallback font.
+ * 根据指定的字符类型和字体类型生成字体列表，可以选择性地指定回退字体。
+ *
+ * @param characterType - The type of characters to consider: "simplified" or "traditional".
+ *                       要考虑的字符类型："simplified"（简体）或 "traditional"（繁体）。
+ * @param fontType - The type of font to generate the list for: "chinese", "helvetica", "italics", "song", "imitation-song", "new-song", or "li".
+ *                  要生成列表的字体类型："chinese"、"helvetica"、"italics"、"song"、"imitation-song"、"new-song" 或 "li"。
+ * @param fallbackFont - The fallback font to use if the desired font type is not available. Pass `null` for no fallback.
+ *                      如果所需字体类型不可用，则使用的回退字体。传递 `null` 表示没有回退字体。
+ * @param declareEnglishFont - Whether to declare an English font.
+ *                             是否声明英文字体。
+ *
+ * @returns {string[]} An array of font names based on the specified criteria.
+ *                    基于指定条件的字体名称数组。
+ */
+export function generateFontList(
+  characterType: "simplified" | "traditional",
+  fontType: FontType,
+  fallbackFont: string | null = "sans-serif",
+  declareEnglishFont: boolean = true,
+): string[] {
+  const fontList: string[] = [];
+
+  // Add English font declaration if required
+  if (declareEnglishFont) {
+    fontList.push(`Punctuation ${fontType.charAt(0).toUpperCase() + fontType.slice(1)}`);
+    fontList.push("Arial");
+  }
+
+  // Determine the appropriate font list based on the character type
+  if (characterType === "simplified") {
+    const chineseFonts = [macosSimplifiedChinese, windowsSimplifiedChinese, linuxSimplifiedChinese].flat();
+    // Select the font list based on the font type
+    switch (fontType) {
+      case "chinese":
+        fontList.push(...chineseFonts);
+        break;
+        // 黑体
+      case "helvetica":
+        fontList.push("PingFang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Source Han Sans CN", "Noto Sans CJK SC",
+          "WenQuanYi Micro Hei", "WenQuanYi Zen Hei", "SimHei", "WenQuanYi Zen Hei Sharp");
+        break;
+        // 楷体
+      case "italics":
+        fontList.push("Kaiti SC", "STKaiti",
+          "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB",
+          "KaiTi", "KaiTi_GB2312", "DFKai-SB");
+        fontList.push(...chineseFonts);
+        break;
+        // 宋体
+      case "song":
+        fontList.push("Songti SC", "Noto Serif CJK SC",
+          "Source Han Serif SC",
+          "Source Han Serif CN",
+          "STSong",
+          "AR PL New Sung",
+          "AR PL SungtiL GB",
+          "NSimSun",
+          "SimSun",
+          "WenQuanYi Bitmap Song",
+          "AR PL UMing CN",
+          "PMingLiU",
+          "MingLiU",
+        );
+        fontList.push(...chineseFonts);
+        break;
+        // 仿宋体
+      case "imitation-song":
+        fontList.push("STFangsong", "FangSong", "FangSong_GB2312");
+        fontList.push(...chineseFonts);
+        break;
+        // 新宋体
+      case "new-song":
+        fontList.push("SimSun-ExtB", "NSimSun");
+        fontList.push(...chineseFonts);
+        break;
+        // 隶书
+      case "li":
+        fontList.push("LiSu", "STLiti");
+        fontList.push(...chineseFonts);
+        break;
+      default:
+        fontList.push(...chineseFonts);
+    }
+  } else {
+    const chineseFonts = [macosTraditionalChinese, windowsTraditionalChinese, linuxTraditionalChinese].flat();
+    // Select the font list based on the font type
+    switch (fontType) {
+      case "chinese":
+        fontList.push(...chineseFonts);
+        break;
+        // 黑体
+      case "helvetica":
+        fontList.push("PingFang SC", "Heiti SC", "Microsoft YaHei", "Source Han Sans SC", "Source Han Sans CN", "Noto Sans CJK SC",
+          "WenQuanYi Micro Hei", "WenQuanYi Zen Hei", "SimHei", "WenQuanYi Zen Hei Sharp");
+        break;
+        // 楷体
+      case "italics":
+        fontList.push("Kaiti SC", "STKaiti",
+          "AR PL UKai CN", "AR PL UKai HK", "AR PL UKai TW", "AR PL UKai TW MBE", "AR PL KaitiM GB",
+          "KaiTi", "KaiTi_GB2312", "DFKai-SB", "TW-Kai");
+        fontList.push(...chineseFonts);
+        break;
+        // 宋体
+      case "song":
+        fontList.push("Songti SC", "Noto Serif CJK SC",
+          "Source Han Serif SC",
+          "Source Han Serif CN",
+          "STSong",
+          "AR PL New Sung",
+          "AR PL SungtiL GB",
+          "NSimSun",
+          "SimSun",
+          "TW-Sung",
+          "WenQuanYi Bitmap Song",
+          "AR PL UMing CN",
+          "AR PL UMing HK",
+          "AR PL UMing TW",
+          "AR PL UMing TW MBE",
+          "PMingLiU",
+          "MingLiU",
+        );
+        fontList.push(...chineseFonts);
+        break;
+        // 仿宋体
+      case "imitation-song":
+        fontList.push("STFangsong", "FangSong", "FangSong_GB2312");
+        fontList.push(...chineseFonts);
+        break;
+        // 新宋体
+      case "new-song":
+        fontList.push("SimSun-ExtB", "NSimSun");
+        fontList.push(...chineseFonts);
+        break;
+        // 隶书
+      case "li":
+        fontList.push("LiSu", "STLiti");
+        fontList.push(...chineseFonts);
+        break;
+      default:
+        fontList.push(...chineseFonts);
+    }
+  }
+
+  // Add fallback font if specified
+  if (fallbackFont !== null) {
+    fontList.push(fallbackFont);
+  }
+
+  return fontList;
+}
+
 export const defaultChineseFonts = {
-  "chinese": [
-    "Punctuation SC",
-    "Helvetica Neue",
-    "Helvetica",
-    "Arial",
-    "Microsoft Yahei",
-    "Hiragino Sans GB",
-    "Heiti SC",
-    "WenQuanYi Micro Hei",
-    "sans-serif",
-  ],
+
+  "chinese": generateFontList("simplified", "chinese"),
   // 黑体
-  "helvetica": [
-    "Punctuation SC",
-    "-apple-system",
-    "Noto Sans",
-    "Helvetica Neue",
-    "Helvetica",
-    "Nimbus Sans L",
-    "Arial",
-    "Liberation Sans",
-    "PingFang SC",
-    "Hiragino Sans GB",
-    "Noto Sans CJK SC",
-    "Source Han Sans SC",
-    "Source Han Sans CN",
-    "Microsoft YaHei",
-    "Wenquanyi Micro Hei",
-    "WenQuanYi Zen Hei",
-    "ST Heiti",
-    "SimHei",
-    "WenQuanYi Zen Hei Sharp",
-    "sans-serif",
-  ],
+  "helvetica": generateFontList("simplified", "helvetica"),
   // 楷体
-  "italics": [
-    "Punctuation SC",
-    "Baskerville",
-    "Georgia",
-    "Liberation Serif",
-    "Kaiti SC",
-    "STKaiti",
-    "AR PL UKai CN",
-    "AR PL UKai HK",
-    "AR PL UKai TW",
-    "AR PL UKai TW MBE",
-    "AR PL KaitiM GB",
-    "KaiTi",
-    "KaiTi_GB2312",
-    "DFKai-SB",
-    "TW-Kai",
-    "serif",
-  ],
+  "italics": generateFontList("simplified", "italics"),
   // 宋体
-  "song": [
-    "Punctuation SC",
-    "Georgia",
-    "Nimbus Roman No9 L",
-    "Songti SC",
-    "Noto Serif CJK SC",
-    "Source Han Serif SC",
-    "Source Han Serif CN",
-    "STSong",
-    "AR PL New Sung",
-    "AR PL SungtiL GB",
-    "NSimSun",
-    "SimSun",
-    "TW-Sung",
-    "WenQuanYi Bitmap Song",
-    "AR PL UMing CN",
-    "AR PL UMing HK",
-    "AR PL UMing TW",
-    "AR PL UMing TW MBE",
-    "PMingLiU",
-    "MingLiU",
-    "serif",
-  ],
+  "song": generateFontList("simplified", "song"),
   // 仿宋体
-  "imitation-song": [
-    "Punctuation SC",
-    "Baskerville",
-    "Times New Roman",
-    "Liberation Serif",
-    "STFangsong",
-    "FangSong",
-    "FangSong_GB2312",
-    "CWTEX-F",
-    "serif",
-  ],
+  "imitation-song": generateFontList("simplified", "imitation-song"),
   // 新宋体
-  "new-song": [
-    "Punctuation SC",
-    "SimSun-ExtB",
-    "NSimSun",
-    "Microsoft YaHei UI",
-    "Microsoft YaHei UI Light",
-    "Microsoft YaHei UI Bold",
-    "serif",
-  ],
+  "new-song": generateFontList("simplified", "new-song"),
   // 隶书
-  "li": [
-    "Punctuation SC",
-    "LiSu",
-    "YouYuan",
-    "STXingkai",
-    "Xingkai SC",
-    "PMingLiU-ExtB",
-    "serif",
-  ],
+  "li": generateFontList("simplified", "li"),
 };
+
+/**
+ * Generates a CSS @font-face rule for the specified font type.
+ * 根据指定的字体类型生成 CSS @font-face 规则。
+ *
+ * @param fontType - The type of font to generate the @font-face rule for.
+ *                  要生成 @font-face 规则的字体类型。
+ *
+ * @returns {string} The generated @font-face CSS rule as a string.
+ *                   生成的 @font-face CSS 规则作为字符串。
+ */
+export function generateFontFaceRule(fontType: FontType): string {
+  const fontList = defaultChineseFonts[fontType];
+  if (!fontList) {
+    throw new Error(`Font type "${fontType}" is not valid.`);
+  }
+
+  const fontName = `Punctuation ${fontType.charAt(0).toUpperCase() + fontType.slice(1)}`;
+  const filteredFontList = fontList.filter(font => font !== "Arial"); // Filtering out Arial
+  const fontSrc = filteredFontList.map(font => `local('${font}')`).join(", ");
+
+  return `
+@font-face {
+  font-family: '${fontName}';
+  src: ${fontSrc};
+  unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7, U+007E, U+002F; 
+}
+`;
+}
diff --git a/src/index.ts b/src/index.ts
@@ -1,6 +1,7 @@
 import { toArray } from "@unocss/core";
 import type { Preset } from "unocss";
-import { defaultChineseFonts } from "./defaultChineseFonts";
+import type { FontType } from "./defaultChineseFonts";
+import { defaultChineseFonts, generateFontFaceRule } from "./defaultChineseFonts";
 import type { ChineseFontsOptions } from "./types";
 
 export * from "./types";
@@ -43,24 +44,12 @@ const presetChinese = (options: ChineseFontsOptions = {}): Preset => {
       }
     };
   }
-  //  TODO: Dynamically calculates and sets the font styles for specific Chinese characters based on the selected theme's fonts.
-  //  TODO: 根据所选主题的字体动态计算并设置特定中文字符的字体样式。
-  preset.preflights = [
-    {
-      getCSS: () => `
-      @font-face {
-        font-family: 'Punctuation SC';
-        src: local('PingFang SC'), local('Noto Sans SC'), local('Noto Sans CJK SC'), local('Heiti SC'), local('Microsoft Yahei');
-        unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7, U+007E, U+002F; /* Unicode range for punctuation marks */
-      }
-      @font-face {
-        font-family: 'Punctuation TC';
-        src: local('PingFang TC'), local('Noto Sans TC'), local('Noto Sans CJK TC'), local('Heiti TC'), local('Microsoft JhengHei');
-        unicode-range: U+201C, U+201D, U+2018, U+2019, U+2E3A, U+2014, U+2013, U+2026, U+00B7, U+007E, U+002F; /* Unicode range for punctuation marks */
-      }
-    `,
-    },
-  ];
+
+  const fontFacePreflights = Object.keys(defaultChineseFonts).map(fontType => ({
+    getCSS: () => generateFontFaceRule(<FontType>fontType),
+  }));
+
+  preset.preflights = fontFacePreflights;
 
   return preset;
 };