feat: different fonts for different languages (zh/ja)

ouuan · Jan 7, 2024 · e8df882 · e8df882
1 parent cd23dd5
commit e8df882
Show file tree

Hide file tree

Showing 7 changed files with 125 additions and 42 deletions.
diff --git a/src/misc/font.ts b/src/misc/font.ts
@@ -47,44 +47,81 @@ export default async function generateFonts(pages: RouteToRender[]) {
   const previewServer = await preview();
 
   const pagesInfo: PageInfo[] = pages.filter((page) => page.outputFilename.endsWith('.html')).map((page) => ({
-    url: new URL(page.path, previewServer.resolvedUrls.local?.[0]?.replace('localhost', '127.0.0.1') || 'http://127.0.0.1:4173').href,
+    url: new URL(page.path, previewServer.resolvedUrls.local?.[0]).href,
     filePath: resolve(rootPath, 'dist', page.outputFilename),
     probability: ((visitorMap.get(page.path) || 0) + 1) / (maxVisitor + 2),
   }));
 
-  const fonts: FontInfo[] = [{
-    fontFamily: '"Noto Serif SC Web Font", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", 思源宋体, "Noto Serif CJK TC", "Source Han Serif TC", "Source Han Serif TW", "Noto Serif", Georgia, "Times New Roman", Times, STSong, SimSun, serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    webFontName: 'Noto Serif SC Web Font',
-    variants: [{
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      fontStyle: 'normal',
-      outputFileName: 'NotoSerifSC-Regular',
-      originalFontPath: resolve(rootPath, 'third_party/fonts/NotoSerifSC-Regular.otf'),
-    }, {
-      fontWeight: 700,
-      fontDisplay: 'swap',
-      fontStyle: 'normal',
-      outputFileName: 'NotoSerifSC-Bold',
-      originalFontPath: resolve(rootPath, 'third_party/fonts/NotoSerifSC-Bold.otf'),
-    }],
-  }, {
-    fontFamily: '"XiaWu Punctuations", "LXGW WenKai Web Font", "LXGW WenKai", "LXGW WenKai Lite", 霞鹜文楷, STKaiti, KaiTi, serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
-    webFontName: 'LXGW WenKai Web Font',
-    variants: [{
-      fontWeight: 400,
-      fontDisplay: 'swap',
-      fontStyle: 'normal',
-      outputFileName: 'LXGWWenKai-Regular',
-      originalFontPath: resolve(rootPath, 'third_party/fonts/LXGWWenKai-Regular.ttf'),
-    }, {
-      fontWeight: 700,
-      fontDisplay: 'swap',
-      fontStyle: 'normal',
-      outputFileName: 'LXGWWenKai-Bold',
-      originalFontPath: resolve(rootPath, 'third_party/fonts/LXGWWenKai-Bold.ttf'),
-    }],
-  }];
+  const fonts: FontInfo[] = [
+    {
+      fontFamily: '"Noto Serif SC Web Font", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", 思源宋体, "Noto Serif CJK TC", "Source Han Serif TC", "Source Han Serif TW", "Noto Serif", Georgia, "Times New Roman", Times, STSong, SimSun, serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      webFontName: 'Noto Serif SC Web Font',
+      variants: [{
+        fontWeight: 400,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'NotoSerifSC-Regular',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/NotoSerifSC-Regular.otf'),
+      }, {
+        fontWeight: 700,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'NotoSerifSC-Bold',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/NotoSerifSC-Bold.otf'),
+      }],
+    },
+    {
+      fontFamily: '"XiaWu Punctuations", "LXGW WenKai Web Font", "LXGW WenKai", "LXGW WenKai Lite", 霞鹜文楷, STKaiti, KaiTi, serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      webFontName: 'LXGW WenKai Web Font',
+      variants: [{
+        fontWeight: 400,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'LXGWWenKai-Regular',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/LXGWWenKai-Regular.ttf'),
+      }, {
+        fontWeight: 700,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'LXGWWenKai-Bold',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/LXGWWenKai-Bold.ttf'),
+      }],
+    },
+    {
+      fontFamily: '"Noto Serif JP Web Font", "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", "Noto Serif SC Web Font", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", 思源宋体, "Noto Serif CJK TC", "Source Han Serif TC", "Source Han Serif TW", "Noto Serif", Georgia, "Times New Roman", Times, STSong, SimSun, serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      webFontName: 'Noto Serif JP Web Font',
+      variants: [{
+        fontWeight: 400,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'NotoSerifJP-Regular',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/NotoSerifJP-Regular.otf'),
+      }, {
+        fontWeight: 700,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'NotoSerifJP-Bold',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/NotoSerifJP-Bold.otf'),
+      }],
+    },
+    {
+      fontFamily: '"Klee One Web Font", "Klee One", "XiaWu Punctuations", "LXGW WenKai Web Font", "LXGW WenKai", "LXGW WenKai Lite", 霞鹜文楷, STKaiti, KaiTi, serif, "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
+      webFontName: 'Klee One Web Font',
+      variants: [{
+        fontWeight: 400,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'KleeOne-Regular',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/KleeOne-Regular.ttf'),
+      }, {
+        fontWeight: 600,
+        fontDisplay: 'swap',
+        fontStyle: 'normal',
+        outputFileName: 'KleeOne-SemiBold',
+        originalFontPath: resolve(rootPath, 'third_party/fonts/KleeOne-SemiBold.ttf'),
+      }],
+    },
+  ];
 
   await glyphSegregator({
     pages: pagesInfo,

diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
@@ -1,5 +1,5 @@
 @font-face {
-  font-family: "Monospace Unicode Fallback";
+  font-family: "Monospace SC Fallback";
   src: local("Noto Sans Mono CJK SC"),
        local("Source Han Mono SC"),
        local("Noto Sans CJK SC"),
@@ -8,6 +8,20 @@
   unicode-range: U+1000-fffff;
 }
 
+@font-face {
+  font-family: "Monospace JP Fallback";
+  src: local("Noto Sans Mono CJK JP"),
+       local("Source Han Mono JP"),
+       local("Noto Sans CJK JP"),
+       local("Source Han Sans JP"),
+       local("Noto Sans Mono CJK SC"),
+       local("Source Han Mono SC"),
+       local("Noto Sans CJK SC"),
+       local("Source Han Sans SC"),
+       local("Microsoft YaHei");
+  unicode-range: U+1000-fffff;
+}
+
 @font-face {
   font-family: "XiaWu Punctuations";
   font-style: normal;
@@ -29,12 +43,22 @@
 }
 
 :root {
-  --default-serif-font: "Noto Serif SC Web Font", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", 思源宋体, "Noto Serif CJK TC", "Source Han Serif TC", "Source Han Serif TW", "Noto Serif", Georgia, "Times New Roman", Times, STSong, SimSun, serif, var(--default-emoji-font);
-  --default-sans-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans CJK SC", "Source Han Sans SC", 思源黑体, "Noto Sans CJK TC", "Source Han Sans TC", "Noto Sans", "Segoe UI", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif, var(--default-emoji-font);
-  --default-mono-font: ui-monospace, DejaVu Sans Mono, Noto Sans Mono, SFMono-Regular, Menlo, Monaco, Consolas, "Monospace Unicode Fallback", monospace, var(--default-emoji-font);
-  --default-kai-font: "XiaWu Punctuations", "LXGW WenKai Web Font", "LXGW WenKai", "LXGW WenKai Lite", 霞鹜文楷, STKaiti, KaiTi, serif, var(--default-emoji-font);
+  --zh-sans-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans CJK SC", "Source Han Sans SC", 思源黑体, "Noto Sans CJK TC", "Source Han Sans TC", "Noto Sans", "Segoe UI", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif, var(--default-emoji-font);
+  --ja-sans-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Noto Sans CJK JP", "Source Han Sans JP", "Noto Sans CJK TC", "Source Han Sans TC", 思源黑体, "Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans", "Segoe UI", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif, var(--default-emoji-font);
+
+  --zh-serif-font: "Noto Serif SC Web Font", "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Source Han Serif CN", 思源宋体, "Noto Serif CJK TC", "Source Han Serif TC", "Source Han Serif TW", "Noto Serif", Georgia, "Times New Roman", Times, STSong, SimSun, serif, var(--default-emoji-font);
+  --ja-serif-font: "Noto Serif JP Web Font", "Noto Serif JP", "Noto Serif CJK JP", "Source Han Serif JP", var(--zh-serif-font);
+
+  --zh-kai-font: "XiaWu Punctuations", "LXGW WenKai Web Font", "LXGW WenKai", "LXGW WenKai Lite", 霞鹜文楷, STKaiti, KaiTi, serif, var(--default-emoji-font);
+  --ja-kai-font: "Klee One Web Font", "Klee One", var(--zh-kai-font);
+
+  --zh-mono-font: ui-monospace, DejaVu Sans Mono, Noto Sans Mono, SFMono-Regular, Menlo, Monaco, Consolas, "Monospace SC Fallback", monospace, var(--default-emoji-font);
+  --ja-mono-font: ui-monospace, DejaVu Sans Mono, Noto Sans Mono, SFMono-Regular, Menlo, Monaco, Consolas, "Monospace JP Fallback", monospace, var(--default-emoji-font);
+
+  --zh-latin-font: "Noto Serif", Georgia, "Times New Roman", Times, serif;
+  --ja-latin-font: var(--zh-latin-font);
+
   --default-emoji-font: "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --default-latin-font: "Noto Serif", Georgia, "Times New Roman", Times, serif;
 
   code,
   kbd,
@@ -43,3 +67,21 @@
     @apply font-mono;
   }
 }
+
+[lang] {
+  font-family: var(--zh-font);
+  --default-sans-font:  var(--zh-sans-font);
+  --default-serif-font: var(--zh-serif-font);
+  --default-kai-font:   var(--zh-kai-font);
+  --default-mono-font:  var(--zh-mono-font);
+  --default-latin-font: var(--zh-latin-font);
+}
+
+[lang^=ja] {
+  font-family: var(--ja-font);
+  --default-sans-font:  var(--ja-sans-font);
+  --default-serif-font: var(--ja-serif-font);
+  --default-kai-font:   var(--ja-kai-font);
+  --default-mono-font:  var(--ja-mono-font);
+  --default-latin-font: var(--ja-latin-font);
+}
diff --git a/third_party/fonts/KleeOne-Regular.ttf b/third_party/fonts/KleeOne-Regular.ttf
diff --git a/third_party/fonts/KleeOne-SemiBold.ttf b/third_party/fonts/KleeOne-SemiBold.ttf
diff --git a/third_party/fonts/NotoSerifJP-Bold.otf b/third_party/fonts/NotoSerifJP-Bold.otf
diff --git a/third_party/fonts/NotoSerifJP-Regular.otf b/third_party/fonts/NotoSerifJP-Regular.otf
diff --git a/uno.config.ts b/uno.config.ts
@@ -14,8 +14,12 @@ export default defineConfig({
   blocklist: [cssProperty[0]?.[0] as RegExp],
   rules: [
     [
-      /^font-(serif|sans|mono|kai|latin)$/,
-      ([, type]) => ({ 'font-family': `var(--default-${type}-font)` }),
+      /^font-(sans|serif|kai|mono|latin)$/,
+      ([, type]) => ({
+        'font-family': `var(--default-${type}-font)`,
+        '--ja-font': `var(--ja-${type}-font)`,
+        '--zh-font': `var(--zh-${type}-font)`,
+      }),
     ],
     ['break-anywhere', { 'overflow-wrap': 'anywhere' }],
   ],