feat: supported footnotes for definition list, closes #2278 (#2279)

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

@@ -4,10 +4,11 @@ import { BookDoc } from '@/libs/document';
 import { useReaderStore } from '@/store/readerStore';
 import { useBookDataStore } from '@/store/bookDataStore';
 import { useFoliateEvents } from '../hooks/useFoliateEvents';
+import { useCustomFontStore } from '@/store/customFontStore';
 import { getFootnoteStyles, getStyles, getThemeCode } from '@/utils/style';
 import { getPopupPosition, getPosition, Position } from '@/utils/sel';
 import { FootnoteHandler } from 'foliate-js/footnotes.js';
-import { mountAdditionalFonts } from '@/styles/fonts';
+import { mountAdditionalFonts, mountCustomFont } from '@/styles/fonts';
 import { eventDispatcher } from '@/utils/event';
 import { FoliateView } from '@/types/view';
 import { isCJKLang } from '@/utils/lang';
@@ -32,6 +33,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
 
   const { getBookData } = useBookDataStore();
   const { getView, getViewSettings } = useReaderStore();
+  const { getLoadedFonts } = useCustomFontStore();
   const view = getView(bookKey);
   const viewSettings = getViewSettings(bookKey)!;
   const footnoteHandler = new FootnoteHandler();
@@ -62,6 +64,9 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
         const { doc } = e.detail;
         const bookData = getBookData(bookKey)!;
         mountAdditionalFonts(doc, isCJKLang(bookData.book?.primaryLanguage));
+        getLoadedFonts().forEach((font) => {
+          mountCustomFont(doc, font);
+        });
       });
       footnoteViewRef.current = view;
       footnoteRef.current?.replaceChildren(view);

apps/readest-app/src/components/settings/ColorPanel.tsx

@@ -26,10 +26,10 @@ import { SettingsPanelPanelProp } from './SettingsDialog';
 import { useFileSelector } from '@/hooks/useFileSelector';
 import { PREDEFINED_TEXTURES } from '@/styles/textures';
 import { HighlightColor } from '@/types/book';
+import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 import Select from '@/components/Select';
 import ThemeEditor from './ThemeEditor';
 import ColorInput from './ColorInput';
-import { HIGHLIGHT_COLOR_HEX } from '@/services/constants';
 
 const ColorPanel: React.FC<SettingsPanelPanelProp> = ({ bookKey, onRegisterReset }) => {
   const _ = useTranslation();

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

@@ -400,6 +400,11 @@ export const getFootnoteStyles = () => `
     padding: unset !important;
   }
 
+  dt {
+    font-weight: bold;
+    line-height: 1.6;
+  }
+
   .epubtype-footnote,
   aside[epub|type~="endnote"],
   aside[epub|type~="footnote"],