From 5ced3d9c47f9dc8d6fd9705560c6b9a3ac34c3f3 Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sat, 21 Sep 2024 02:00:14 +0800 Subject: [PATCH] feat: customize font (#1014) close #954 --- src/_locales/cmn-CN.yml | 18 +++++--- src/_locales/cmn-TW.yml | 18 +++++--- src/_locales/en.yml | 18 +++++--- src/_locales/jyut.yml | 20 +++++---- src/components/Settings/General/General.vue | 31 ++++++++++---- .../views/necessarySettingsWatchers.ts | 18 ++++++++ src/logic/storage.ts | 4 ++ src/styles/fonts.scss | 41 ++++++++++--------- src/utils/main.ts | 4 +- 9 files changed, 116 insertions(+), 56 deletions(-) diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index e704d6e2..95d4f8cc 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -65,6 +65,7 @@ settings: # Settings group group_common: 通用 + group_languages_and_fonts: 语言和字体 group_link_opening_behavior: 链接打开行为 group_video_card: 视频卡片 group_performance: 毛玻璃和性能 @@ -90,12 +91,6 @@ settings: open_settings: 打开设置... # General - select_language: 界面语言 - select_language_opt: - english: 英文 - mandarin_cn: 官话 - 简体中文 - mandarin_tw: 官話 - 正體中文 - jyut: 廣東話 touch_screen_optimization: 触屏体验改进 touch_screen_optimization_desc: > 启用后，如顶栏，你可能需要点击项目以查看更多信息，而不是鼠标直接悬停查看。（旧版顶栏不支持此功能） @@ -106,6 +101,17 @@ settings: enable_horizontal_scrolling: 启用横向滚动 enable_horizontal_scrolling_desc: 启用后，鼠标滚动时将直接滚动横向滚动列表。 + select_language: 界面语言 + select_language_opt: + english: 英文 + mandarin_cn: 官话 - 简体中文 + mandarin_tw: 官話 - 正體中文 + jyut: 廣東話 + customize_font: 自定义字体 + customize_font_desc: |- + 对于喜欢旧字形的用户，我们推荐 Shanggu Fonts (尚古字型) 和 Fan Wun Hak (繁媛黑體)。 + 这些字形还具有将简体中文转换为正体中文的能力。 + video_card_link_opening_behavior: 视频卡片和番剧卡片链接打开行为 video_card_link_opening_behavior_opt: drawer: 抽屉打开 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index 0ee47506..371b3462 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -65,6 +65,7 @@ settings: # Settings group group_common: 常用 + group_languages_and_fonts: 語言與字型 group_link_opening_behavior: 連結開啟行為 group_video_card: 影片卡片 group_performance: 毛玻璃與效能 @@ -90,12 +91,6 @@ settings: open_settings: 打開設定... # General - select_language: 介面語言 - select_language_opt: - english: 英文 - mandarin_cn: 官话 - 简体中文 - mandarin_tw: 官話 - 正體中文 - jyut: 廣東話 touch_screen_optimization: 觸控螢幕體驗改進 touch_screen_optimization_desc: > 啟用後，如頂欄，你可能需要點選項目才能看到更多資訊，而不是滑鼠移過去就會顯示。（舊版頂欄不支援此功能） @@ -106,6 +101,17 @@ settings: enable_horizontal_scrolling: 啟用橫向捲動 enable_horizontal_scrolling_desc: 啟用後，滑鼠捲動時將直接捲動橫向捲軸列表。 + select_language: 介面語言 + select_language_opt: + english: 英文 + mandarin_cn: 官话 - 简体中文 + mandarin_tw: 官話 - 正體中文 + jyut: 廣東話 + customize_font: 自訂字型 + customize_font_desc: |- + 對於喜歡舊字形的用戶，我們推薦 Shanggu Fonts (尚古字型) 和 Fan Wun Hak (繁媛黑體)。 + 這些字型還具有將簡體中文轉換為正體中文的能力。 + video_card_link_opening_behavior: 影片和番劇卡片連結開啟行為 video_card_link_opening_behavior_opt: drawer: 抽屜開啟 diff --git a/src/_locales/en.yml b/src/_locales/en.yml index b33227c9..62096806 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -65,6 +65,7 @@ settings: # Settings group group_common: Common + group_languages_and_fonts: Languages and Fonts group_link_opening_behavior: Link opening behavior group_video_card: Video Card group_performance: Frosted Glass & Performance @@ -90,12 +91,6 @@ settings: open_settings: Open Settings... # General - select_language: Language - select_language_opt: - english: English - mandarin_cn: Mandarin - Simplified Chinese - mandarin_tw: Mandarin - Traditional Chinese - jyut: Cantonese touch_screen_optimization: Touch screen optimization touch_screen_optimization_desc: > After this setting is turned on, like the top bar, you must click on items to view more information instead of hovering over them. (This feature is not supported by the old top bar.) @@ -106,6 +101,17 @@ settings: enable_horizontal_scrolling: Enable horizontal scrolling enable_horizontal_scrolling_desc: After enabling, mouse scrolling will directly scroll the horizontal scroll list. + select_language: Language + select_language_opt: + english: English + mandarin_cn: Mandarin - Simplified Chinese + mandarin_tw: Mandarin - Traditional Chinese + jyut: Cantonese + customize_font: Customize font + customize_font_desc: |- + For users who favor the traditional style of Chinese characters, we recommend Shanggu Fonts (尚古字體) and Fan Wun Hak (繁媛黑體). + These fonts also possess the capability to convert simplified Chinese into traditional characters. + video_card_link_opening_behavior: Video card and bangumi card link opening behavior video_card_link_opening_behavior_opt: drawer: Open in drawer diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index 7f36f4eb..3ad6220b 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -65,6 +65,7 @@ settings: # Settings group group_common: 通用 + group_languages_and_fonts: 語言同字型 group_link_opening_behavior: 連結開啓行爲 group_video_card: 影片卡片 group_performance: 毛玻璃同效能 @@ -90,12 +91,6 @@ settings: open_settings: 打開設定... # General - select_language: 介面語言 - select_language_opt: - english: 英文 - mandarin_cn: 官话 - 简体中文 - mandarin_tw: 官話 - 正體中文 - jyut: 廣東話 touch_screen_optimization: 觸控螢幕體驗改進 touch_screen_optimization_desc: > 呢個設定開咗之後，好似頂部欄噉，撳咗啲嘢先至可以睇到更多嘅資料，而唔係淨係靠游標懸停就睇到。（舊版頂部欄唔支援呢個功能） @@ -106,7 +101,18 @@ settings: enable_horizontal_scrolling: 使用橫向捲動 enable_horizontal_scrolling_desc: 用咗之後，轆緊滑鼠就可以直接打橫掃水平捲軸列表。 - video_card_link_opening_behavior: 影片同番劇卡片連結開啓行爲 + select_language: 介面語言 + select_language_opt: + english: 英文 + mandarin_cn: 官话 - 简体中文 + mandarin_tw: 官話 - 正體中文 + jyut: 廣東話 + customize_font: 自訂字型 + customize_font_desc: |- + 對於舊字形嘅用戶，我哋推介 Shanggu Fonts (尚古字型) 同 Fan Wun Hak (繁媛黑體)。 + 呢啲字型仲可以將簡體中文轉做正體中文。 + + video_card_link_opening_behavior: 影片同番劇卡片連結開啓行爺 video_card_link_opening_behavior_opt: drawer: 喺櫃桶度開啓 new_tab: 新開分頁 diff --git a/src/components/Settings/General/General.vue b/src/components/Settings/General/General.vue index d0964eb9..b2e56fd0 100644 --- a/src/components/Settings/General/General.vue +++ b/src/components/Settings/General/General.vue @@ -67,14 +67,6 @@ watch(() => settings.value.language, (newValue) => { diff --git a/src/contentScripts/views/necessarySettingsWatchers.ts b/src/contentScripts/views/necessarySettingsWatchers.ts index 044a22e3..a2b4fd50 100644 --- a/src/contentScripts/views/necessarySettingsWatchers.ts +++ b/src/contentScripts/views/necessarySettingsWatchers.ts @@ -49,6 +49,24 @@ export function setupNecessarySettingsWatchers() { { immediate: true }, ) + watch( + [() => settings.value.customizeFont, () => settings.value.fontFamily], + () => { + // Set the default font family + if (!settings.value.customizeFont && !settings.value.fontFamily) { + settings.value.fontFamily = `system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", "Noto Sans", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif` + } + + if (settings.value.customizeFont) { + document.documentElement.style.setProperty('--bew-font-family', settings.value.fontFamily) + } + else { + document.documentElement.style.removeProperty('--bew-font-family') + } + }, + { immediate: true }, + ) + watch( () => settings.value.disableFrostedGlass, () => { diff --git a/src/logic/storage.ts b/src/logic/storage.ts index f45df63d..24a5baa3 100644 --- a/src/logic/storage.ts +++ b/src/logic/storage.ts @@ -8,6 +8,8 @@ export const accessKey = useStorageLocal('accessKey', '') export interface Settings { language: string + customizeFont: boolean + fontFamily: string touchScreenOptimization: boolean enableGridLayoutSwitcher: boolean enableHorizontalScrolling: boolean @@ -84,6 +86,8 @@ export interface Settings { } export const settings = useStorageLocal('settings', ref({ language: '', + customizeFont: false, + fontFamily: '', touchScreenOptimization: false, enableGridLayoutSwitcher: true, enableHorizontalScrolling: false, diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss index 9729c97f..5c507fce 100644 --- a/src/styles/fonts.scss +++ b/src/styles/fonts.scss @@ -1,43 +1,44 @@ :root, :host { // 爲何 firefox 在 windows 這裏一定要設定 system-ui 否則直接預設正體中文下用明體有這種垃圾設定，即使你後面還是指定了特定字體？？？？？ - --bew-basic-fonts: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", "Noto Sans", Roboto, + --bew-fonts-basic: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, "Roboto Flex", "Noto Sans", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", Arial, sans-serif; + --bew-fonts-fallback: "PingFang SC", "PingFang HK", "PingFang TC", "Microsoft YaHei", "Microsoft JhengHei", sans-serif; - --bew-fallback-fonts: "PingFang SC", "PingFang HK", "PingFang TC", "Microsoft YaHei", "Microsoft JhengHei", sans-serif; - - --bew-english-fonts: var(--bew-basic-fonts), var(--bew-fallback-fonts); - - --bew-mandarin-cn-fonts: var(--bew-basic-fonts), "PingFang SC", "Source Han Sans SC VF", "Noto Sans CJK SC", - "Source Han Sans SC", "Microsoft YaHei", var(--bew-fallback-fonts); - + --bew-fonts-english: var(--bew-fonts-basic), var(--bew-fonts-fallback); + --bew-fonts-mandarin-cn: var(--bew-fonts-basic), "PingFang SC", "Source Han Sans SC VF", "Noto Sans CJK SC", + "Source Han Sans SC", "Microsoft YaHei", var(--bew-fonts-fallback); // TODO: 使用 CDN 載入 CJK 字體 to prevent 弱撚智 Microsoft JhengHei 視覺干擾 - /* Microsoft JhengHei 是我見過最腦殘弱智的字體，預設下文字太細，但是 windows 正體中文又預設用這個黑體渲染，能用 cdn 換字體就換 */ - --bew-mandarin-tw-fonts: var(--bew-basic-fonts), "PingFang TC", "Source Han Sans TC VF", "Noto Sans CJK TC", - "Source Han Sans TC", "Microsoft JhengHei", var(--bew-fallback-fonts); - + --bew-fonts-mandarin-tw: var(--bew-fonts-basic), "PingFang TC", "Source Han Sans TC VF", "Noto Sans CJK TC", + "Source Han Sans TC", "Microsoft JhengHei", var(--bew-fonts-fallback); /* Microsoft JhengHei 是我見過最腦殘弱智的字體，預設下文字太細，但是 windows 正體中文又預設用這個黑體渲染，能用 cdn 換字體就換 */ - --bew-cantonese-fonts: var(--bew-basic-fonts), "PingFang HK", "Source Han Sans HC VF", "Noto Sans CJK HK", - "Source Han Sans HC", "Microsoft JhengHei", var(--bew-fallback-fonts); + --bew-fonts-cantonese: var(--bew-fonts-basic), "PingFang HK", "Source Han Sans HC VF", "Noto Sans CJK HK", + "Source Han Sans HC", "Microsoft JhengHei", var(--bew-fonts-fallback); } -.bewly-wrapper, -.bewly-design * { - font-family: var(--bew-english-fonts) !important; +:lang(en) .bewly-wrapper, +:lang(en).bewly-design * { + font-family: var(--bew-font-family, var(--bew-fonts-english)); } :lang(zh-CN) .bewly-wrapper, :lang(zh-CN).bewly-design * { - font-family: var(--bew-mandarin-cn-fonts) !important; + font-family: var(--bew-font-family, var(--bew-fonts-mandarin-cn)); } :lang(zh-TW) .bewly-wrapper, :lang(zh-TW).bewly-design * { - font-family: var(--bew-mandarin-tw-fonts) !important; + font-family: var(--bew-font-family, var(--bew-fonts-mandarin-tw)); } :lang(zh-HK) .bewly-wrapper, :lang(zh-HK).bewly-design * { - font-family: var(--bew-cantonese-fonts) !important; + font-family: var(--bew-font-family, var(--bew-fonts-cantonese)); } + +// 不知道爲何 firefox 用下面這一段樣式優先級別會高過的樣式，先註釋先了 +// .bewly-wrapper, +// .bewly-design * { +// font-family: var(--bew-font-family, var(--bew-fonts-english)); +// } diff --git a/src/utils/main.ts b/src/utils/main.ts index 06458875..7479bfe2 100644 --- a/src/utils/main.ts +++ b/src/utils/main.ts @@ -126,11 +126,11 @@ export function scrollToTop(element: HTMLElement, targetScrollTop = 0 as number) }) } -export function injectCSS(css: string): HTMLStyleElement { +export function injectCSS(css: string, element: HTMLElement = document.documentElement): HTMLStyleElement { const el = document.createElement('style') el.setAttribute('rel', 'stylesheet') el.textContent = css - document.documentElement.appendChild(el) + element.appendChild(el) return el }