feat: customize font (#1014)

close #954
2025-04-14 13:15:29 +00:00 · 2024-09-21 02:00:14 +08:00
parent 91c12acbf8
commit 5ced3d9c47
9 changed files with 116 additions and 56 deletions
--- 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: |-
+    对于喜欢旧字形的用户，我们推荐 <a href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字型)</a> 和 <a href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>。
+    这些字形还具有将简体中文转换为正体中文的能力。
+
  video_card_link_opening_behavior: 视频卡片和番剧卡片链接打开行为
  video_card_link_opening_behavior_opt:
    drawer: 抽屉打开
--- 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: |-
+    對於喜歡舊字形的用戶，我們推薦 <a href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字型)</a> 和 <a href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>。
+    這些字型還具有將簡體中文轉換為正體中文的能力。
+
  video_card_link_opening_behavior: 影片和番劇卡片連結開啟行為
  video_card_link_opening_behavior_opt:
    drawer: 抽屜開啟
--- 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 <a href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字體)</a> and <a href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>.
+    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
--- 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: |-
+    對於舊字形嘅用戶，我哋推介 <a href="https://github.com/GuiWonder/Shanggu" target="_blank">Shanggu Fonts (尚古字型)</a> 同 <a href="https://github.com/ayaka14732/FanWunHak" target="_blank">Fan Wun Hak (繁媛黑體)</a>。
+    呢啲字型仲可以將簡體中文轉做正體中文。
+
+  video_card_link_opening_behavior: 影片同番劇卡片連結開啓行爺
  video_card_link_opening_behavior_opt:
    drawer: 喺櫃桶度開啓
    new_tab: 新開分頁
--- a/src/components/Settings/General/General.vue
+++ b/src/components/Settings/General/General.vue
@@ -67,14 +67,6 @@ watch(() => settings.value.language, (newValue) => {
 <template>
  <div>
    <SettingsItemGroup :title="$t('settings.group_common')">
-      <SettingsItem :title="$t('settings.select_language')">
-        <Select
-          v-model="settings.language"
-          :options="langOptions"
-          w="full"
-        />
-      </SettingsItem>
-
      <SettingsItem :title="$t('settings.touch_screen_optimization')" :desc="$t('settings.touch_screen_optimization_desc')">
        <Radio v-model="settings.touchScreenOptimization" />
      </SettingsItem>
@@ -88,6 +80,23 @@ watch(() => settings.value.language, (newValue) => {
      </SettingsItem>
    </SettingsItemGroup>

+    <SettingsItemGroup :title="$t('settings.group_languages_and_fonts')">
+      <SettingsItem :title="$t('settings.select_language')">
+        <Select
+          v-model="settings.language"
+          :options="langOptions"
+          w="full"
+        />
+      </SettingsItem>
+      <SettingsItem :title="$t('settings.customize_font')">
+        <Radio v-model="settings.customizeFont" />
+        <template v-if="settings.customizeFont" #bottom>
+          <Input v-model="settings.fontFamily" />
+          <div class="customize-font-desc" text="sm $bew-text-2" mt-1 v-html="t('settings.customize_font_desc')" />
+        </template>
+      </SettingsItem>
+    </SettingsItemGroup>
+
    <SettingsItemGroup :title="$t('settings.group_performance')">
      <SettingsItem :title="$t('settings.disable_frosted_glass')">
        <Radio v-model="settings.disableFrostedGlass" />
@@ -136,5 +145,9 @@ watch(() => settings.value.language, (newValue) => {
 </template>

 <style lang="scss" scoped>
-
+:deep(.customize-font-desc) {
+  a {
+    --uno: "text-$bew-theme-color hover:text-$bew-theme-color-80";
+  }
+}
 </style>
--- 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,
    () => {
--- 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<Settings>({
  language: '',
+  customizeFont: false,
+  fontFamily: '',
  touchScreenOptimization: false,
  enableGridLayoutSwitcher: true,
  enableHorizontalScrolling: false,
--- 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));
+// }
--- 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
 }