fix UI font for CJK

This commit is contained in:
yusakuw 2022-01-23 00:35:49 +09:00
parent 73930f3e69
commit da84d9b2e1
4 changed files with 40 additions and 10 deletions

View File

@ -3,7 +3,7 @@
html, html,
body { body {
margin: 0; margin: 0;
font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", font-family: "Segoe UI", "Source Han Sans Regular",
sans-serif; sans-serif;
} }
body { body {

View File

@ -49,12 +49,28 @@ body.darwin {
html, html,
body { body {
background-color: transparent; background-color: transparent;
font-family: "Segoe UI", "Source Han Sans SC Regular", "Microsoft YaHei", font-family: "Segoe UI", "Source Han Sans Regular",
sans-serif; sans-serif;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
margin: 0; 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.win32,
body.linux { body.linux {
background-color: var(--neutralLighterAlt); background-color: var(--neutralLighterAlt);

View File

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

View File

@ -5,13 +5,13 @@ import { ThemeSettings } from "../schema-types"
import intl from "react-intl-universal" import intl from "react-intl-universal"
import { SourceTextDirection } from "./models/source" import { SourceTextDirection } from "./models/source"
const lightTheme: IPartialTheme = { let lightTheme: IPartialTheme = {
defaultFontStyle: { defaultFontStyle: {
fontFamily: 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, ...lightTheme,
palette: { palette: {
neutralLighterAlt: "#282828", 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) { export function setThemeSettings(theme: ThemeSettings) {
window.settings.setThemeSettings(theme) window.settings.setThemeSettings(theme)
applyThemeSettings() applyThemeSettings()