Преглед на файлове

Добавил динамическую загрузку онлайн шрифтов

Book Pauk преди 6 години
родител
ревизия
0d48954e7b
променени са 3 файла, в които са добавени 20 реда и са изтрити 4 реда
  1. 14 4
      client/components/Reader/TextPage/TextPage.vue
  2. 5 0
      package-lock.json
  3. 1 0
      package.json

+ 14 - 4
client/components/Reader/TextPage/TextPage.vue

@@ -24,6 +24,7 @@
 //-----------------------------------------------------------------------------
 import Vue from 'vue';
 import Component from 'vue-class-component';
+import {loadCSS} from 'fg-loadcss';
 import _ from 'lodash';
 import {sleep} from '../../../share/utils';
 
@@ -170,6 +171,7 @@ class TextPage extends Vue {
             ReaderDefault: 0,
             Roboto: 0,
             OpenSans: 0,
+            XoloniumRegular: 0,
         }
         this.fontList = [];
         for (let fontName in this.fontShifts)
@@ -180,8 +182,8 @@ class TextPage extends Vue {
         this.backgroundColor = '#478355';
         this.fontStyle = '';// 'bold','italic'
         this.fontSize = 33;// px
-        this.fontName = 'ReaderDefault';
-        this.fontCss = '';
+        this.fontName = 'XoloniumRegular';
+        this.fontCssUrl = 'https://fontlibrary.org/face/xolonium';
         this.lineInterval = 7;// px, межстрочный интервал
         this.textAlignJustify = true;// выравнивание по ширине
         this.p = 50;// px, отступ параграфа
@@ -226,8 +228,16 @@ class TextPage extends Vue {
                 this.parsed = parsed;
                 this.calcDrawProps();
 
-                //await this.loadFontCss();
-                await this.loadFonts();
+                loadCSS(this.fontCssUrl);
+                let done = false;
+                while (!done) {
+                    try {
+                        await this.loadFonts();
+                        done = true;
+                    } catch (e) {
+                        await sleep(100);
+                    }
+                }
 
                 this.draw();
                 this.refreshTime();

+ 5 - 0
package-lock.json

@@ -4135,6 +4135,11 @@
         "pend": "~1.2.0"
       }
     },
+    "fg-loadcss": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fg-loadcss/-/fg-loadcss-2.1.0.tgz",
+      "integrity": "sha512-HpvR2uRoKvrYAEwimw+k4Fr2NVHYPfld5Lc/f9uy3mKeUTXhS5urL24XA2rqyq5b2i410EXCLir4Uhsb8J1QaQ=="
+    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",

+ 1 - 0
package.json

@@ -63,6 +63,7 @@
     "detect-file-type": "^0.2.0",
     "element-ui": "^2.4.11",
     "express": "^4.16.4",
+    "fg-loadcss": "^2.1.0",
     "fs-extra": "^7.0.1",
     "got": "^9.5.1",
     "iconv-lite": "^0.4.24",