chore(font): twemoji font don't display when cors

src/App.tsx

@@ -9,6 +9,7 @@ import {
   selectedEndpoint,
   useAutoSwitchTheme,
   useProxies,
+  useTwemoji,
 } from '~/signals'
 
 const Setup = lazy(() => import('~/pages/Setup'))
@@ -29,6 +30,20 @@ export const App = () => {
     if (selectedEndpoint() && endpoint()) {
       void useProxies().updateProxies()
     }
+
+    const rootElement = document.querySelector(':root') as HTMLElement
+
+    if (useTwemoji()) {
+      rootElement.style.setProperty(
+        'font-family',
+        "'Fira Sans', 'Twemoji Mozilla', system-ui, monospace",
+      )
+    } else {
+      rootElement.style.setProperty(
+        'font-family',
+        "'Fira Sans', system-ui, monospace",
+      )
+    }
   })
 
   onMount(() => {

src/i18n/en.ts

@@ -42,6 +42,7 @@ export default {
   proxiesPreviewType: 'Proxies preview type',
   urlForLatencyTest: 'Url for latency test',
   autoCloseConns: 'Automatically close all connections',
+  useTwemoji: 'Use Twemoji Mozilla Font',
   autoSwitchTheme: 'Automatically switch theme',
   favDayTheme: 'Favorite light theme',
   favNightTheme: 'Favorite dark theme',

src/i18n/zh.ts

@@ -42,6 +42,7 @@ export default {
   proxiesPreviewType: '节点组预览样式',
   urlForLatencyTest: '测速链接',
   autoCloseConns: '切换代理时自动断开全部连接',
+  useTwemoji: '使用Twemoji Mozilla字体',
   autoSwitchTheme: '自动切换主题',
   favDayTheme: '浅色主题偏好',
   favNightTheme: '深色主题偏好',

src/pages/Config.tsx

@@ -27,9 +27,11 @@ import {
   setProxiesPreviewType,
   setRenderInTwoColumn,
   setRenderProxiesInSamePage,
+  setTwemoji,
   setUrlForLatencyTest,
   urlForLatencyTest,
   useRequest,
+  useTwemoji,
 } from '~/signals'
 import type { DNSQuery, Config as IConfig } from '~/types'
 
@@ -336,6 +338,17 @@ const ConfigForXd = () => {
         />
       </div>
 
+      <div>
+        <div class="pb-4 text-lg font-semibold">{t('useTwemoji')}</div>
+
+        <input
+          class="toggle"
+          type="checkbox"
+          checked={useTwemoji()}
+          onChange={(e) => setTwemoji(e.target.checked)}
+        />
+      </div>
+
       <div class="flex flex-col">
         <div class="pb-4 text-lg font-semibold">{t('urlForLatencyTest')}</div>
 

src/signals/config.ts

@@ -24,6 +24,10 @@ export const [autoCloseConns, setAutoCloseConns] = makePersisted(
   createSignal(false),
   { name: 'autoCloseConns', storage: localStorage },
 )
+export const [useTwemoji, setTwemoji] = makePersisted(createSignal(false), {
+  name: 'useTwemoji',
+  storage: localStorage,
+})
 export const [autoSwitchTheme, setAutoSwitchTheme] = makePersisted(
   createSignal(false),
   { name: 'autoSwitchTheme', storage: localStorage },