From 7115f76971e29adf6eb141a136839af42c3c72d4 Mon Sep 17 00:00:00 2001 From: zenoslin Date: Wed, 26 Jan 2022 15:36:48 +0800 Subject: [PATCH] Fix font family rendering error on Web env. --- web/src/binding.ts | 3 -- web/src/core/scaler-context.ts | 5 +- web/src/pag-composition.ts | 7 ++- web/src/pag-font.ts | 20 ++------ web/src/utils/font-family.ts | 88 ++++++++++++++++++---------------- 5 files changed, 61 insertions(+), 62 deletions(-) diff --git a/web/src/binding.ts b/web/src/binding.ts index e5e06e3f38..8b7261a53e 100644 --- a/web/src/binding.ts +++ b/web/src/binding.ts @@ -35,9 +35,6 @@ export const binding = (module: PAG) => { module.ScalerContext = ScalerContext; module.WebMask = WebMask; WebMask.module = module; - module.registerFontPath = function (path) { - this._RegisterFontPath(path); - }; module.setFallbackFontNames = function (fontNames) { this._SetFallbackFontNames(fontNames); }; diff --git a/web/src/core/scaler-context.ts b/web/src/core/scaler-context.ts index fe2bea6fc2..e44d1c865e 100644 --- a/web/src/core/scaler-context.ts +++ b/web/src/core/scaler-context.ts @@ -1,5 +1,6 @@ import { NativeImage } from './native-image'; import { measureText } from '../utils/measure-text'; +import { defaultFontNames } from '../utils/font-family'; export interface Bounds { top: number; @@ -56,6 +57,8 @@ export class ScalerContext { } public fontString() { + const fallbackFontNames = defaultFontNames.concat(); + fallbackFontNames.unshift(this.fontName); const attributes = []; if (this.fauxBold) { attributes.push('bold'); @@ -64,7 +67,7 @@ export class ScalerContext { attributes.push('italic'); } attributes.push(`${this.size}px`); - attributes.push(`${this.fontName}`); + attributes.push(`${fallbackFontNames.join(',')}`); return attributes.join(' '); } diff --git a/web/src/pag-composition.ts b/web/src/pag-composition.ts index d0e33c0bfa..f91628dc50 100644 --- a/web/src/pag-composition.ts +++ b/web/src/pag-composition.ts @@ -7,10 +7,15 @@ export class PAGComposition extends PAGLayer { public constructor(wasmIns) { super(wasmIns); } - + /** + * Returns the width of the Composition. + */ public async width(): Promise { return (await PAGComposition.module.webAssemblyQueue.exec(this.wasmIns._width, this.wasmIns)) as number; } + /** + * Returns the height of the Composition. + */ public async height(): Promise { return (await PAGComposition.module.webAssemblyQueue.exec(this.wasmIns._height, this.wasmIns)) as number; } diff --git a/web/src/pag-font.ts b/web/src/pag-font.ts index e6d49b876b..183a8df191 100644 --- a/web/src/pag-font.ts +++ b/web/src/pag-font.ts @@ -2,8 +2,7 @@ import { PAG } from './types'; import { readFile } from './utils/common'; import { ErrorCode } from './utils/error-map'; import { Log } from './utils/log'; -import { defaultFontList } from './utils/font-family'; -import { IPHONE, MACOS } from './utils/ua'; +import { defaultFontNames } from './utils/font-family'; export class PAGFont { public static module: PAG; @@ -15,6 +14,7 @@ export class PAGFont { if (!buffer || !(buffer.byteLength > 0)) Log.errorByCode(ErrorCode.PagFontDataEmpty); const dataUint8Array = new Uint8Array(buffer); const fontFace = new FontFace(family, dataUint8Array); + document.fonts.add(fontFace); await fontFace.load(); } /** @@ -27,25 +27,11 @@ export class PAGFont { * The fonts registered here are mainly used to put words in a list in order, and the list can put up to UINT16_MAX words. * The emoji font family also has emoji words. */ - const fontNames = ['emoji']; - if (MACOS || IPHONE) { - fontNames.concat(defaultFontList.cocoa); - } else { - fontNames.concat(defaultFontList.windows); - } - const names = new this.module.VectorString(); - for (const name of fontNames) { + for (const name of defaultFontNames) { names.push_back(name); } this.module.setFallbackFontNames(names); names.delete(); } - - public static async loadFont(fontFamily: string, BinaryData: string | BinaryData) { - const font = new FontFace(fontFamily, BinaryData); - await font.load(); - document.fonts.add(font); - return fontFamily; - } } diff --git a/web/src/utils/font-family.ts b/web/src/utils/font-family.ts index 6081ec5406..4a349f268c 100644 --- a/web/src/utils/font-family.ts +++ b/web/src/utils/font-family.ts @@ -1,40 +1,48 @@ -export const defaultFontList = { - windows: [ - 'Microsoft YaHei', - 'Microsoft JhengHei', - 'Hiragino Sans GB', - 'SimSun', - 'FangSong', - 'KaiTi', - 'NSimSun', - 'SimHei', - 'DengXian', - 'Adobe Song Std', - 'Adobe Fangsong Std', - 'Adobe Heiti Std', - 'Adobe Kaiti Std', - 'Times New Roman', - 'Comic Sans MS', - 'Courier New', - 'Calibri', - 'Impact', - 'Microsoft Sans Serif', - 'Symbol', - 'Tahoma', - 'Trebuchet MS', - 'Verdana', - ], - cocoa: [ - 'PingFang SC', - 'Apple SD Gothic Neo', - 'Helvetica', - 'Myanmar Sangam MN', - 'Thonburi', - 'Mishafi', - 'Menlo', - 'Kailasa', - 'Kefa', - 'Kohinoor Telugu', - 'Hiragino Maru Gothic ProN', - ], -}; +import { IPHONE, MACOS } from './ua'; + +const windows = [ + 'Microsoft YaHei', + 'Microsoft JhengHei', + 'Hiragino Sans GB', + 'SimSun', + 'FangSong', + 'KaiTi', + 'NSimSun', + 'SimHei', + 'DengXian', + 'Adobe Song Std', + 'Adobe Fangsong Std', + 'Adobe Heiti Std', + 'Adobe Kaiti Std', + 'Times New Roman', + 'Comic Sans MS', + 'Courier New', + 'Calibri', + 'Impact', + 'Microsoft Sans Serif', + 'Symbol', + 'Tahoma', + 'Trebuchet MS', + 'Verdana', +]; +const cocoa = [ + 'PingFang SC', + 'Apple SD Gothic Neo', + 'Helvetica', + 'Myanmar Sangam MN', + 'Thonburi', + 'Mishafi', + 'Menlo', + 'Kailasa', + 'Kefa', + 'Kohinoor Telugu', + 'Hiragino Maru Gothic ProN', +]; + +export const defaultFontNames = (() => { + if (MACOS || IPHONE) { + return ['emoji'].concat(...cocoa); + } else { + return ['emoji'].concat(...windows); + } +})();