Fix font family rendering error on Web env.

Tencent · Jan 26, 2022 · 7115f76 · 7115f76
1 parent 68bbbfd
commit 7115f76
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 62 deletions.
diff --git 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
@@ -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
@@ -7,10 +7,15 @@ export class PAGComposition extends PAGLayer {
   public constructor(wasmIns) {
     super(wasmIns);
   }
-
+  /**
+   * Returns the width of the Composition.
+   */
   public async width(): Promise<number> {
     return (await PAGComposition.module.webAssemblyQueue.exec(this.wasmIns._width, this.wasmIns)) as number;
   }
+  /**
+   * Returns the height of the Composition.
+   */
   public async height(): Promise<number> {
     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
@@ -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
@@ -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);
+  }
+})();