更新软件默认使用的字体

src/renderer-lyric/App.vue

@@ -30,11 +30,12 @@ import useHoverHide from '@lyric/useApp/useHoverHide'
 import { onMounted } from '@common/utils/vueTools'
 import { setting } from '@lyric/store/state'
 import { sendConnectMainWindowEvent } from '@lyric/utils/ipc'
+import useCommon from '@lyric/useApp/useCommon'
 import useLyric from '@lyric/useApp/useLyric'
 import useTheme from '@lyric/useApp/useTheme'
 import { init as initLyricPlayer } from '@lyric/core/lyric'
 
-
+useCommon()
 const { handleMouseDown, handleTouchDown } = useWindowSize()
 const { handleMouseMoveMain, isHoverHide, isMouseEnter } = useHoverHide()
 useLyric()

src/renderer-lyric/assets/styles/reset.less

@@ -1,3 +1,26 @@
+// https://github.com/microsoft/vscode/blob/2dd0bca3954d4c03c427d6b447205b68817bd000/src/vs/workbench/browser/media/style.css
+/* Font Families (with CJK support) */
+
+.windows { font-family: "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(zh-Hans) { font-family:"Microsoft YaHei", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(zh-Hant) { font-family:"Microsoft Jhenghei", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(ja) { font-family:"Yu Gothic UI", "Meiryo UI", "Segoe WPC", "Segoe UI", sans-serif; }
+.windows:lang(ko) { font-family:"Malgun Gothic", "Dotom", "Segoe WPC", "Segoe UI", sans-serif; }
+
+.mac { font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
+.mac:lang(zh-Hans) { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", sans-serif; }
+.mac:lang(zh-Hant) { font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", sans-serif; }
+.mac:lang(ja) { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic Pro", sans-serif; }
+.mac:lang(ko) { font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Nanum Gothic", "AppleGothic", sans-serif; }
+
+/* Linux: add `system-ui` as first font and not `Ubuntu` to allow other distribution pick their standard OS font */
+.linux { font-family: system-ui, "Ubuntu", "Droid Sans", sans-serif; }
+.linux:lang(zh-Hans) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans SC", "Source Han Sans CN", "Source Han Sans", sans-serif; }
+.linux:lang(zh-Hant) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans TC", "Source Han Sans TW", "Source Han Sans", sans-serif; }
+.linux:lang(ja) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans J", "Source Han Sans JP", "Source Han Sans", sans-serif; }
+.linux:lang(ko) { font-family: system-ui, "Ubuntu", "Droid Sans", "Source Han Sans K", "Source Han Sans JR", "Source Han Sans", "UnDotum", "FBaekmuk Gulim", sans-serif; }
+
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -16,16 +39,20 @@ time, mark, audio, video {
 	border: 0;
 	font-size: 100%;
 	font: inherit;
+  font-size: inherit;
 	vertical-align: baseline;
 }
+input, button, textarea {
+	font-family: inherit;
+}
+
 /* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
-}
-html {
-  font-family: "Microsoft YaHei", "Microsoft Jhenghei", "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", sans-serif;
+  display: block;
 }
+// html {
+// }
 body {
 	line-height: 1.2;
 }
@@ -44,6 +71,3 @@ table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }
-button {
-  font-family: inherit;
-}

src/renderer-lyric/index.html

@@ -8,6 +8,16 @@
   <body id="body" style="background-color: transparent;">
     <div id="root"></div>
     <script>
+      const formatLang = (lang = 'en') => {
+        if (lang === 'zh-cn') return 'zh-Hans'
+        if (lang === 'zh-tw') return 'zh-Hant'
+        return lang.split('-')[0]
+      }
+      window.setLang = (lang = navigator.language.toLocaleLowerCase()) => {
+        document.documentElement.setAttribute('lang', formatLang(lang))
+      }
+      window.setLang()
+      document.documentElement.classList.add(/os=(\w+)/.exec(window.location.search)[1])
       window.dom_style_theme = document.createElement('style')
       window.dom_style_lyric = document.createElement('style')
 

src/renderer-lyric/main.ts

@@ -17,7 +17,10 @@ void getSetting().then((setting) => {
   // window.lx.appSetting = setting
   // Set language automatically
   const languageId = setting['common.langId']
-  if (window.i18n.locale !== languageId && languageId != null) window.i18n.setLanguage(languageId)
+  if (window.i18n.locale !== languageId && languageId != null) {
+    window.i18n.setLanguage(languageId)
+    window.setLang(languageId)
+  }
 
   // store.commit('setSetting', setting)
   initSetting(setting)

src/renderer-lyric/types/app.d.ts

@@ -9,6 +9,7 @@ declare global {
     lxData: any
 
     setTheme: (colors: Record<string, string>) => void
+    setLang: (lang?: string) => void
     setLyricColor: (colors: Record<string, string>) => void
   }
 

src/renderer-lyric/useApp/useCommon.ts

@@ -0,0 +1,10 @@
+import { watch } from '@common/utils/vueTools'
+import { setting } from '@lyric/store/state'
+
+export default () => {
+  watch(() => setting['common.langId'], (id) => {
+    if (!id) return
+    window.i18n.setLanguage(id)
+    window.setLang(id)
+  })
+}