Merge pull request #355 from yusakuw/master

fix UI font for CJK
yang991178 · Jun 8, 2022 · 438c2e2 · 438c2e2
2 parents 1765ca6 + da84d9b
commit 438c2e2
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 10 deletions.
diff --git a/dist/article/article.css b/dist/article/article.css
@@ -3,7 +3,7 @@
 html,
 body {
     margin: 0;
-    font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei",
+    font-family: "Segoe UI", "Source Han Sans Regular",
         sans-serif;
 }
 body {

diff --git a/dist/styles/global.css b/dist/styles/global.css
@@ -49,12 +49,28 @@ body.darwin {
 html,
 body {
     background-color: transparent;
-    font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei",
+    font-family: "Segoe UI", "Source Han Sans Regular",
         sans-serif;
     height: 100%;
     overflow: hidden;
     margin: 0;
 }
+body:lang(zh-CN) {
+    font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei",
+        sans-serif;
+}
+body:lang(zh-TW) {
+    font-family: "Segoe UI", "Source Han Sans TC Regular", "Microsoft JhengHei",
+        sans-serif;
+}
+body:lang(ja) {
+    font-family: "Segoe UI", "Source Han Sans JP Regular", "Yu Gothic UI",
+        sans-serif;
+}
+body:lang(ko) {
+    font-family: "Segoe UI", "Source Han Sans KR Regular", "Malgun Gothic",
+        sans-serif;
+}
 body.win32,
 body.linux {
     background-color: var(--neutralLighterAlt);

diff --git a/src/scripts/models/app.ts b/src/scripts/models/app.ts
@@ -32,7 +32,7 @@ import {
     selectAllArticles,
     showItemFromId,
 } from "./page"
-import { getCurrentLocale } from "../settings"
+import { getCurrentLocale, setThemeDefaultFont } from "../settings"
 import locales from "../i18n/_locales"
 import { SYNC_SERVICE, ServiceActionTypes } from "./service"
 
@@ -369,10 +369,14 @@ export interface InitIntlAction {
     type: typeof INIT_INTL
     locale: string
 }
-export const initIntlDone = (locale: string): InitIntlAction => ({
-    type: INIT_INTL,
-    locale: locale,
-})
+export const initIntlDone = (locale: string): InitIntlAction => {
+    document.documentElement.lang = locale
+    setThemeDefaultFont(locale)
+    return {
+        type: INIT_INTL,
+        locale: locale,
+    }
+}
 
 export function initIntl(): AppThunk<Promise<void>> {
     return dispatch => {

diff --git a/src/scripts/settings.ts b/src/scripts/settings.ts
@@ -5,13 +5,13 @@ import { ThemeSettings } from "../schema-types"
 import intl from "react-intl-universal"
 import { SourceTextDirection } from "./models/source"
 
-const lightTheme: IPartialTheme = {
+let lightTheme: IPartialTheme = {
     defaultFontStyle: {
         fontFamily:
-            '"Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", sans-serif',
+            '"Segoe UI", "Source Han Sans Regular", sans-serif',
     },
 }
-const darkTheme: IPartialTheme = {
+let darkTheme: IPartialTheme = {
     ...lightTheme,
     palette: {
         neutralLighterAlt: "#282828",
@@ -41,6 +41,16 @@ const darkTheme: IPartialTheme = {
     },
 }
 
+export function setThemeDefaultFont(locale: string) {
+    switch(locale) {
+        case "zh-CN": lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", sans-serif'; break
+        case "zh-TW": lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans TC Regular", "Microsoft JhengHei", sans-serif'; break
+        case "ja":    lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans JP Regular", "Yu Gothic UI", sans-serif'; break
+        case "ko":    lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans KR Regular", "Malgun Gothic", sans-serif'; break
+        default:      lightTheme.defaultFontStyle.fontFamily = '"Segoe UI", "Source Han Sans Regular", sans-serif'
+    }
+    applyThemeSettings()
+}
 export function setThemeSettings(theme: ThemeSettings) {
     window.settings.setThemeSettings(theme)
     applyThemeSettings()