diff --git a/client/components/App.vue b/client/components/App.vue index f2ef9047..6167d27b 100644 --- a/client/components/App.vue +++ b/client/components/App.vue @@ -258,4 +258,11 @@ body, html, #app { height: 100%; font: normal 12pt Arial, Verdana, Sans-serif; } + +@font-face { + font-family: 'ReaderDefaultFont'; + src: + url('fonts/reader-default-font.ttf') format('truetype'); +} +/*url('fonts/myfont.woff') format('woff'),*/ diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index 42116aba..cda6bf81 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/client/components/Reader/TextPage/TextPage.vue @@ -50,7 +50,7 @@ class TextPage extends Vue { this.context.textBaseline = 'bottom'; } - calcDrawProps() { + async calcDrawProps() { this.canvas.width = this.$refs.main.clientWidth; this.canvas.height = this.$refs.main.clientHeight; this.lineHeight = this.fontSize + this.lineInterval; @@ -70,6 +70,15 @@ class TextPage extends Vue { } } + async loadFonts() { + let loaded = await Promise.all(this.fontList.map(font => document.fonts.check(font))); + if (loaded.some(r => !r)) { + loaded = await Promise.all(this.fontList.map(font => document.fonts.load(font))); + if (loaded.some(r => !r.length)) + throw new Error('some font not loaded'); + } + } + showBook() { this.$refs.main.focus(); this.book = null; @@ -80,12 +89,15 @@ class TextPage extends Vue { this.linesUp = null; this.linesDown = null; + //preloaded fonts + this.fontList = ['10px ReaderDefaultFont']; + //draw props this.textColor = 'black'; this.backgroundColor = '#478355'; this.fontStyle = '';// 'bold','italic' this.fontSize = 40;// px - this.fontName = 'arial'; + this.fontName = 'ReaderDefaultFont'; this.lineInterval = 15;// px, межстрочный интервал this.textAlignJustify = true;// выравнивание по ширине this.p = 60;// px, отступ параграфа @@ -117,6 +129,7 @@ class TextPage extends Vue { this.parsed = parsed; this.calcDrawProps(); + await this.loadFonts(); this.drawPage(); })(); } @@ -306,5 +319,4 @@ class TextPage extends Vue { margin: 0; padding: 0; } - - \ No newline at end of file +