feat: also add sans-serif CJK fonts (#853)

apps/readest-app/src/app/reader/components/settings/FontPanel.tsx

@@ -5,6 +5,8 @@ import {
   ANDROID_FONTS,
   CJK_FONTS_PATTENS,
   CJK_NAMES_PATTENS,
+  CJK_SANS_SERIF_FONTS,
+  CJK_SERIF_FONTS,
   IOS_FONTS,
   LINUX_FONTS,
   MACOS_FONTS,
@@ -111,6 +113,11 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
   const [sansSerifFont, setSansSerifFont] = useState(viewSettings.sansSerifFont!);
   const [monospaceFont, setMonospaceFont] = useState(viewSettings.monospaceFont!);
   const [fontWeight, setFontWeight] = useState(viewSettings.fontWeight!);
+  const [CJKFonts] = useState<string[]>(() => {
+    return Array.from(new Set([...sysFonts, ...CJK_SERIF_FONTS, ...CJK_SANS_SERIF_FONTS]))
+      .filter((font) => CJK_FONTS_PATTENS.test(font) || CJK_NAMES_PATTENS.test(font))
+      .sort((a, b) => a.localeCompare(b));
+  });
 
   useEffect(() => {
     if (isTauriAppPlatform() && appService?.hasSysFontsList) {
@@ -238,9 +245,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
                 className='config-item-top'
                 family='serif'
                 label={_('CJK Font')}
-                options={sysFonts.filter(
-                  (font) => CJK_FONTS_PATTENS.test(font) || CJK_NAMES_PATTENS.test(font),
-                )}
+                options={CJKFonts}
                 selected={defaultCJKFont}
                 onSelect={setDefaultCJKFont}
               />
@@ -267,7 +272,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
               className='config-item-top'
               family='serif'
               label={_('Serif Font')}
-              options={SERIF_FONTS}
+              options={[...SERIF_FONTS, ...CJK_SERIF_FONTS]}
               moreOptions={sysFonts}
               selected={serifFont}
               onSelect={setSerifFont}
@@ -275,7 +280,7 @@ const FontPanel: React.FC<{ bookKey: string }> = ({ bookKey }) => {
             <FontFace
               family='sans-serif'
               label={_('Sans-Serif Font')}
-              options={SANS_SERIF_FONTS}
+              options={[...SANS_SERIF_FONTS, ...CJK_SANS_SERIF_FONTS]}
               moreOptions={sysFonts}
               selected={sansSerifFont}
               onSelect={setSansSerifFont}

apps/readest-app/src/services/constants.ts

@@ -145,10 +145,12 @@ export const SERIF_FONTS = [
   'Vollkorn',
   'Georgia',
   'Times New Roman',
-  _('LXGW WenKai GB Screen'),
-  _('LXGW WenKai TC'),
 ];
 
+export const CJK_SERIF_FONTS = [_('LXGW WenKai GB Screen'), _('LXGW WenKai TC')];
+
+export const CJK_SANS_SERIF_FONTS = ['Noto Sans SC', 'Noto Sans TC'];
+
 export const SANS_SERIF_FONTS = ['Roboto', 'Noto Sans', 'Open Sans', 'Helvetica', 'Arial'];
 
 export const MONOSPACE_FONTS = ['Fira Code', 'Lucida Console', 'Consolas', 'Courier New'];

apps/readest-app/src/utils/style.ts

@@ -3,6 +3,8 @@ import {
   SANS_SERIF_FONTS,
   SERIF_FONTS,
   FALLBACK_FONTS,
+  CJK_SANS_SERIF_FONTS,
+  CJK_SERIF_FONTS,
 } from '@/services/constants';
 import { ViewSettings } from '@/types/book';
 import {
@@ -29,13 +31,14 @@ const getFontStyles = (
   themeCode: ThemeCode,
 ) => {
   const { fg, primary } = themeCode;
-  const lastSerifFonts = ['LXGW WenKai GB Screen', 'LXGW WenKai TC', 'Georgia', 'Times New Roman'];
+  const lastSerifFonts = ['Georgia', 'Times New Roman'];
   const serifFonts = [
     serif,
     ...SERIF_FONTS.filter(
       (font) => font !== serif && font !== defaultCJKFont && !lastSerifFonts.includes(font),
     ),
     ...(defaultCJKFont !== serif ? [defaultCJKFont] : []),
+    ...CJK_SERIF_FONTS.filter((font) => font !== serif && font !== defaultCJKFont),
     ...lastSerifFonts.filter(
       (font) => SERIF_FONTS.includes(font) && !lastSerifFonts.includes(defaultCJKFont),
     ),
@@ -45,6 +48,7 @@ const getFontStyles = (
     sansSerif,
     ...SANS_SERIF_FONTS.filter((font) => font !== sansSerif && font !== defaultCJKFont),
     ...(defaultCJKFont !== sansSerif ? [defaultCJKFont] : []),
+    ...CJK_SANS_SERIF_FONTS.filter((font) => font !== sansSerif && font !== defaultCJKFont),
     ...FALLBACK_FONTS,
   ];
   const monospaceFonts = [monospace, ...MONOSPACE_FONTS.filter((font) => font !== monospace)];
@@ -107,6 +111,7 @@ const getAdditionalFontLinks = () => `
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/misans-webfont@1.0.4/misans-l3/misans-l3/result.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cn-fontsource-lxgw-wen-kai-gb-screen@1.0.6/font.min.css" crossorigin="anonymous">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&family=Noto+Sans+TC&display=swap" crossorigin="anonymous">
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap" crossorigin="anonymous">
 `;