From 836199cfe2308b02b5fcbc8e9d491f5d31684f46 Mon Sep 17 00:00:00 2001 From: Tunglies <77394545+Tunglies@users.noreply.github.com> Date: Fri, 4 Sep 2026 09:57:24 +0800 Subject: [PATCH] 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 | 3 --- src/components/home/ip-info-card.tsx | 6 ++++- src/components/profile/editor-viewer.tsx | 6 ++--- .../profile/groups-editor-viewer.tsx | 6 ++--- .../profile/proxies-editor-viewer.tsx | 6 ++--- .../profile/rules-editor-viewer.tsx | 5 ++--- src/components/setting/mods/dns-viewer.tsx | 6 ++--- src/pages/_layout/hooks/use-custom-theme.ts | 1 + src/utils/font-family.ts | 22 +++++++++++++++++++ 9 files changed, 38 insertions(+), 23 deletions(-) create mode 100644 src/utils/font-family.ts diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss index 7edb14b0d..fd170a0c2 100644 --- a/src/assets/styles/index.scss +++ b/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; diff --git a/src/components/home/ip-info-card.tsx b/src/components/home/ip-info-card.tsx index 5fbc732da..4e5146c9a 100644 --- a/src/components/home/ip-info-card.tsx +++ b/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)} diff --git a/src/components/profile/editor-viewer.tsx b/src/components/profile/editor-viewer.tsx index f56a3337b..adcbdb76a 100644 --- a/src/components/profile/editor-viewer.tsx +++ b/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, }} diff --git a/src/components/profile/groups-editor-viewer.tsx b/src/components/profile/groups-editor-viewer.tsx index cbc0c4d8e..93749658b 100644 --- a/src/components/profile/groups-editor-viewer.tsx +++ b/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, // 平滑滚动 }} diff --git a/src/components/profile/proxies-editor-viewer.tsx b/src/components/profile/proxies-editor-viewer.tsx index afacaec29..79f2895c5 100644 --- a/src/components/profile/proxies-editor-viewer.tsx +++ b/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, // 平滑滚动 }} diff --git a/src/components/profile/rules-editor-viewer.tsx b/src/components/profile/rules-editor-viewer.tsx index 8b32c5347..483ace9a1 100644 --- a/src/components/profile/rules-editor-viewer.tsx +++ b/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, // 平滑滚动 }} diff --git a/src/components/setting/mods/dns-viewer.tsx b/src/components/setting/mods/dns-viewer.tsx index 487aff211..4397a1518 100644 --- a/src/components/setting/mods/dns-viewer.tsx +++ b/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 }) { 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, }} diff --git a/src/pages/_layout/hooks/use-custom-theme.ts b/src/pages/_layout/hooks/use-custom-theme.ts index a00c1b67b..464159b40 100644 --- a/src/pages/_layout/hooks/use-custom-theme.ts +++ b/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 diff --git a/src/utils/font-family.ts b/src/utils/font-family.ts new file mode 100644 index 000000000..eb771c808 --- /dev/null +++ b/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(', ')