feat(modules/web): 支持网络字体

close #4210

modules/web/src/api/index.js

@@ -173,7 +173,7 @@ const getProxyCoverUrl = (coverUrl) => {
 /**
  * 从阅读获取需要特定处理的图片
  * @param {string} src
- * @param {`{number}`} width
+ * @param {number|`${number}`} width
  */
 const getProxyImageUrl = (src, width) => {
   if (src.startsWith(legado_http_origin)) return src

modules/web/src/components.d.ts

@@ -3,9 +3,11 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
 export {}
 
-declare module 'vue' {
+declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     BookItems: typeof import('./components/BookItems.vue')['default']
     CatalogItem: typeof import('./components/CatalogItem.vue')['default']

modules/web/src/components/ReadSettings.vue

@@ -45,14 +45,13 @@
 
           <el-popover
             placement="top"
-            width="180"
+            width="270"
             trigger="click"
             v-model:visible="customFontSavePopVisible"
           >
             <p>
-              请确认输入的字体名称完整无误，并且该字体已经安装在您的设备上。
+              已经安装在您的设备上的字体请确认输入的字体名称完整无误，或者从网络下载字体。
             </p>
-            <p>确定保存吗？</p>
             <div style="text-align: right; margin: 0">
               <el-button
                 size="small"
@@ -69,6 +68,12 @@
                 "
                 >确定</el-button
               >
+              <el-button
+                type="primary"
+                size="small"
+                @click="loadFontFromURL"
+                >网络下载</el-button
+              >
             </div>
             <template #reference>
               <span type="text" class="font-item">保存</span>
@@ -180,6 +185,7 @@ import "../assets/fonts/popfont.css";
 import "../assets/fonts/iconfont.css";
 import settings from "../config/themeConfig";
 import API from "@api";
+
 const store = useBookStore();
 
 const theme = ref(0);
@@ -265,6 +271,53 @@ const setCustomFont = () => {
   config.value.customFontName = customFontName.value;
   saveConfig(config.value);
 };
+// 加载网络字体
+const loadFontFromURL = () => {
+  ElMessageBox.prompt(
+    "请输入 字体网络链接",
+    "提示",
+    {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      inputPattern: /^https?:.+$/,
+      inputErrorMessage: "url 形式不正确",
+      beforeClose: (action, instance, done) => {
+        if (action === "confirm") {
+          instance.confirmButtonLoading = true;
+          instance.confirmButtonText = "下载中……";
+          // instance.inputValue
+          const url = instance.inputValue
+          if (typeof FontFace !== "function") {
+            ElMessage.error("浏览器不支持FontFace");
+            return done();
+          }
+          const fontface = new FontFace(
+            customFontName.value,
+            `url("${url}")`
+          )
+          //@ts-ignore
+          document.fonts.add(fontface);
+          fontface.load()
+          //API.getBookShelf()
+            .then(function () {
+              instance.confirmButtonLoading = false;
+              ElMessage.info("字体加载成功！");
+              setCustomFont();
+              done();
+            })
+            .catch(function (error) {
+              instance.confirmButtonLoading = false;
+              instance.confirmButtonText = "确定";
+              ElMessage.error("下载失败，请检查您输入的 url");
+              throw error;
+            });
+        } else {
+          done();
+        }
+      },
+    }
+  );
+}
 
 const fontSize = computed(() => {
   return store.config.fontSize;

modules/web/src/views/BookShelf.vue

@@ -166,7 +166,8 @@ const setIP = () => {
           instance.confirmButtonLoading = true;
           instance.confirmButtonText = "校验中……";
           // instance.inputValue
-          API.testLeagdoHttpUrlConnection("http://" + instance.inputValue)
+          const ip = instance.inputValue;
+          API.testLeagdoHttpUrlConnection("http://" + ip)
           //API.getBookShelf()
             .then(function (response) {
               instance.confirmButtonLoading = false;
@@ -175,7 +176,6 @@ const setIP = () => {
               // response.data.data.length
               // );
               //store.addBooks(response.data.data);
-              const ip = instance.inputValue;
               store.setConnectType("success");
               store.setConnectStatus("已连接 " + ip);
               store.clearSearchBooks();