font: load CJK fonts only in CJK env or the book has CJK languages, closes #1298 (#1323)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -5,13 +5,15 @@ import { FoliateView, wrappedFoliateView } from '@/types/view';
 import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
+import { useBookDataStore } from '@/store/bookDataStore';
 import { useParallelViewStore } from '@/store/parallelViewStore';
 import { useMouseEvent, useTouchEvent } from '../hooks/useIframeEvents';
 import { usePagination } from '../hooks/usePagination';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
 import { useProgressSync } from '../hooks/useProgressSync';
 import { useProgressAutoSave } from '../hooks/useProgressAutoSave';
-import { getStyles, mountAdditionalFonts, transformStylesheet } from '@/utils/style';
+import { getStyles, transformStylesheet } from '@/utils/style';
+import { mountAdditionalFonts } from '@/utils/font';
 import { getBookDirFromLanguage, getBookDirFromWritingMode } from '@/utils/book';
 import { useUICSS } from '@/hooks/useUICSS';
 import {
@@ -26,6 +28,7 @@ import {
 } from '../utils/iframeEventHandlers';
 import { getMaxInlineSize } from '@/utils/config';
 import { getDirFromUILanguage } from '@/utils/rtl';
+import { isCJKLang } from '@/utils/lang';
 import { transformContent } from '@/services/transformService';
 import { lockScreenOrientation } from '@/utils/bridge';
 import { useTextTranslation } from '../hooks/useTextTranslation';
@@ -42,6 +45,7 @@ const FoliateViewer: React.FC<{
   const { getView, setView: setFoliateView, setProgress } = useReaderStore();
   const { getViewSettings, setViewSettings } = useReaderStore();
   const { getParallels } = useParallelViewStore();
+  const { getBookData } = useBookDataStore();
   const { themeCode, isDarkMode } = useThemeStore();
 
   const [toastMessage, setToastMessage] = useState('');
@@ -92,6 +96,7 @@ const FoliateViewer: React.FC<{
     if (detail.doc) {
       const writingDir = viewRef.current?.renderer.setStyles && getDirection(detail.doc);
       const viewSettings = getViewSettings(bookKey)!;
+      const bookData = getBookData(bookKey)!;
       viewSettings.vertical =
         writingDir?.vertical || viewSettings.writingMode.includes('vertical') || false;
       viewSettings.rtl =
@@ -101,7 +106,7 @@ const FoliateViewer: React.FC<{
         false;
       setViewSettings(bookKey, { ...viewSettings });
 
-      mountAdditionalFonts(detail.doc);
+      mountAdditionalFonts(detail.doc, isCJKLang(bookData.book?.primaryLanguage));
 
       if (!detail.doc.isEventListenersAdded) {
         // listened events in iframes are posted to the main window

apps/readest-app/src/app/reader/components/FootnotePopup.tsx

@@ -2,12 +2,15 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { BookDoc } from '@/libs/document';
 import { useReaderStore } from '@/store/readerStore';
+import { useBookDataStore } from '@/store/bookDataStore';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
-import { getFootnoteStyles, getStyles, getThemeCode, mountAdditionalFonts } from '@/utils/style';
+import { getFootnoteStyles, getStyles, getThemeCode } from '@/utils/style';
 import { getPopupPosition, getPosition, Position } from '@/utils/sel';
+import { FootnoteHandler } from 'foliate-js/footnotes.js';
+import { mountAdditionalFonts } from '@/utils/font';
 import { eventDispatcher } from '@/utils/event';
 import { FoliateView } from '@/types/view';
-import { FootnoteHandler } from 'foliate-js/footnotes.js';
+import { isCJKLang } from '@/utils/lang';
 import Popup from '@/components/Popup';
 
 interface FootnotePopupProps {
@@ -26,6 +29,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
   const [popupPosition, setPopupPosition] = useState<Position | null>();
   const [showPopup, setShowPopup] = useState(false);
 
+  const { getBookData } = useBookDataStore();
   const { getView, getViewSettings } = useReaderStore();
   const view = getView(bookKey);
   const viewSettings = getViewSettings(bookKey)!;
@@ -55,7 +59,8 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
       });
       view.addEventListener('load', (e: CustomEvent) => {
         const { doc } = e.detail;
-        mountAdditionalFonts(doc);
+        const bookData = getBookData(bookKey)!;
+        mountAdditionalFonts(doc, isCJKLang(bookData.book?.primaryLanguage));
       });
       footnoteViewRef.current = view;
       footnoteRef.current?.replaceChildren(view);

apps/readest-app/src/app/reader/components/Reader.tsx

@@ -15,8 +15,8 @@ import { useSettingsStore } from '@/store/settingsStore';
 import { useDeviceControlStore } from '@/store/deviceStore';
 import { useScreenWakeLock } from '@/hooks/useScreenWakeLock';
 import { eventDispatcher } from '@/utils/event';
-import { interceptGlobalOpen } from '@/utils/open';
-import { mountAdditionalFonts } from '@/utils/style';
+import { interceptWindowOpen } from '@/utils/open';
+import { mountAdditionalFonts } from '@/utils/font';
 import { setSystemUIVisibility } from '@/utils/bridge';
 import { AboutWindow } from '@/components/AboutWindow';
 import { UpdaterWindow } from '@/components/UpdaterWindow';
@@ -40,7 +40,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
 
   useEffect(() => {
     mountAdditionalFonts(document);
-    interceptGlobalOpen();
+    interceptWindowOpen();
   }, []);
 
   useEffect(() => {