fix: unify font-family usage across GUI

- Remove hardcoded body font-family from index.scss, use MUI theme dt.font_family instead
- Extract monospace font stack to shared MONACO_FONT_FAMILY constant in utils/font-family.ts
- Add platform check for twemoji mozilla in ip-info-card.tsx
- Consolidate 5 Monaco Editor font-family declarations into single constant

src/assets/styles/index.scss

@@ -4,9 +4,6 @@
 
 body {
   margin: 0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
 
   user-select: none;

src/components/home/ip-info-card.tsx

@@ -21,6 +21,7 @@ import { useTranslation } from 'react-i18next'
 
 import { getIpInfo } from '@/services/api'
 import { useQuery } from '@/services/query-client'
+import getSystem from '@/utils/get-system'
 
 import { EnhancedCard } from './enhanced-card'
 
@@ -260,7 +261,10 @@ export const IpInfoCard = () => {
                     width: 28,
                     textAlign: 'center',
                     flexShrink: 0,
-                    fontFamily: '"twemoji mozilla", sans-serif',
+                    fontFamily:
+                      getSystem() === 'windows'
+                        ? '"twemoji mozilla", sans-serif'
+                        : 'sans-serif',
                   }}
                 >
                   {getCountryFlag(ipInfo?.country_code)}

src/components/profile/editor-viewer.tsx

@@ -24,7 +24,7 @@ import { showNotice } from '@/services/notice-service'
 import { useThemeMode } from '@/services/states'
 import type { MonacoEditorInstance, MonacoMarker } from '@/types/monaco'
 import debounce from '@/utils/debounce'
-import getSystem from '@/utils/get-system'
+import { MONACO_FONT_FAMILY } from '@/utils/font-family'
 
 const appWindow = getCurrentWebviewWindow()
 
@@ -247,9 +247,7 @@ export const EditorViewer = ({
                 padding: {
                   top: 33,
                 },
-                fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-                  getSystem() === 'windows' ? ', twemoji mozilla' : ''
-                }`,
+                fontFamily: MONACO_FONT_FAMILY,
                 fontLigatures: false,
                 smoothScrolling: true,
               }}

src/components/profile/groups-editor-viewer.tsx

@@ -60,7 +60,7 @@ import { showNotice } from '@/services/notice-service'
 import { useThemeMode } from '@/services/states'
 import type { TranslationKey } from '@/types/generated/i18n-keys'
 import type { MonacoEditorInstance } from '@/types/monaco'
-import getSystem from '@/utils/get-system'
+import { MONACO_FONT_FAMILY } from '@/utils/font-family'
 import { parseYamlSafe } from '@/utils/yaml'
 
 interface Props {
@@ -1193,9 +1193,7 @@ export const GroupsEditorViewer = (props: Props) => {
               padding: {
                 top: 33, // 顶部padding防止遮挡snippets
               },
-              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-                getSystem() === 'windows' ? ', twemoji mozilla' : ''
-              }`,
+              fontFamily: MONACO_FONT_FAMILY,
               fontLigatures: false, // 连字符
               smoothScrolling: true, // 平滑滚动
             }}

src/components/profile/proxies-editor-viewer.tsx

@@ -46,7 +46,7 @@ import { readProfileFile, saveProfileFile } from '@/services/cmds'
 import { showNotice } from '@/services/notice-service'
 import { useThemeMode } from '@/services/states'
 import type { MonacoEditorInstance } from '@/types/monaco'
-import getSystem from '@/utils/get-system'
+import { MONACO_FONT_FAMILY } from '@/utils/font-family'
 import parseUri from '@/utils/uri-parser'
 import { parseYamlSafe } from '@/utils/yaml'
 
@@ -563,9 +563,7 @@ export const ProxiesEditorViewer = (props: Props) => {
               padding: {
                 top: 33, // 顶部padding防止遮挡snippets
               },
-              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-                getSystem() === 'windows' ? ', twemoji mozilla' : ''
-              }`,
+              fontFamily: MONACO_FONT_FAMILY,
               fontLigatures: false, // 连字符
               smoothScrolling: true, // 平滑滚动
             }}

src/components/profile/rules-editor-viewer.tsx

@@ -49,6 +49,7 @@ import { showNotice } from '@/services/notice-service'
 import { useThemeMode } from '@/services/states'
 import type { TranslationKey } from '@/types/generated/i18n-keys'
 import type { MonacoEditorInstance } from '@/types/monaco'
+import { MONACO_FONT_FAMILY } from '@/utils/font-family'
 import getSystem from '@/utils/get-system'
 import { isValidIpCidr } from '@/utils/network'
 import { parseYamlSafe } from '@/utils/yaml'
@@ -894,9 +895,7 @@ export const RulesEditorViewer = (props: Props) => {
               padding: {
                 top: 33, // 顶部padding防止遮挡snippets
               },
-              fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-                getSystem() === 'windows' ? ', twemoji mozilla' : ''
-              }`,
+              fontFamily: MONACO_FONT_FAMILY,
               fontLigatures: false, // 连字符
               smoothScrolling: true, // 平滑滚动
             }}

src/components/setting/mods/dns-viewer.tsx

@@ -36,7 +36,7 @@ import { useClash } from '@/hooks/use-clash'
 import { showNotice } from '@/services/notice-service'
 import { useThemeMode } from '@/services/states'
 import type { MonacoEditorInstance } from '@/types/monaco'
-import getSystem from '@/utils/get-system'
+import { MONACO_FONT_FAMILY } from '@/utils/font-family'
 
 const Item = styled(ListItem)(() => ({
   padding: '5px 2px',
@@ -1085,9 +1085,7 @@ export function DnsViewer({ ref }: { ref?: Ref<DialogRef> }) {
             padding: {
               top: 33,
             },
-            fontFamily: `Fira Code, JetBrains Mono, Roboto Mono, "Source Code Pro", Consolas, Menlo, Monaco, monospace, "Courier New", "Apple Color Emoji"${
-              getSystem() === 'windows' ? ', twemoji mozilla' : ''
-            }`,
+            fontFamily: MONACO_FONT_FAMILY,
             fontLigatures: false,
             smoothScrolling: true,
           }}

src/pages/_layout/hooks/use-custom-theme.ts

@@ -274,6 +274,7 @@ export const useCustomTheme = () => {
 
         /* 背景图处理 */
         body {
+          font-family: ${dt.font_family};
           background-color: var(--background-color);
           ${
             hasUserBackground

src/utils/font-family.ts

@@ -0,0 +1,22 @@
+import getSystem from './get-system'
+
+const OS = getSystem()
+
+const MONACO_FONT_FAMILY_BASE = [
+  'Fira Code',
+  'JetBrains Mono',
+  'Roboto Mono',
+  '"Source Code Pro"',
+  'Consolas',
+  'Menlo',
+  'Monaco',
+  'monospace',
+  '"Courier New"',
+  '"Apple Color Emoji"',
+]
+
+if (OS === 'windows') {
+  MONACO_FONT_FAMILY_BASE.push('twemoji mozilla')
+}
+
+export const MONACO_FONT_FAMILY = MONACO_FONT_FAMILY_BASE.join(', ')