Add fallback fontFamily on Web env. (#323)

Tencent · May 13, 2022 · f8dbc60 · f8dbc60
1 parent c8ef89f
commit f8dbc60
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/web/src/core/scaler-context.ts b/web/src/core/scaler-context.ts
@@ -1,6 +1,6 @@
 import { NativeImage } from './native-image';
 import { measureText } from '../utils/measure-text';
-import { defaultFontNames, getFontFamilys } from '../utils/font-family';
+import { defaultFontNames, getFontFamilies } from '../utils/font-family';
 import { Rect } from '../types';
 
 const canvas = ((): HTMLCanvasElement | OffscreenCanvas => {
@@ -68,7 +68,7 @@ export class ScalerContext {
     attributes.push(`${this.size}px`);
     // css font-family
     const fallbackFontNames = defaultFontNames.concat();
-    fallbackFontNames.unshift(...getFontFamilys(this.fontName, this.fontStyle));
+    fallbackFontNames.unshift(...getFontFamilies(this.fontName, this.fontStyle));
     attributes.push(`${fallbackFontNames.join(',')}`);
     return attributes.join(' ');
   }

diff --git a/web/src/utils/font-family.ts b/web/src/utils/font-family.ts
@@ -4,7 +4,7 @@ export const defaultFontNames = (() => {
   return ['emoji'].concat(...fontNames);
 })();
 
-export const getFontFamilys = (name: string, style = ''): string[] => {
+export const getFontFamilies = (name: string, style = ''): string[] => {
   if (!name) return [];
   const nameChars = name.split(' ');
   let names = [];
@@ -14,7 +14,7 @@ export const getFontFamilys = (name: string, style = ''): string[] => {
     names.push(nameChars.join(''));
     names.push(nameChars.join(' '));
   }
-  return names.reduce((pre: string[], cur: string) => {
+  const fontFamilies = names.reduce((pre: string[], cur: string) => {
     if (!style) {
       pre.push(`${cur}`);
     } else {
@@ -23,4 +23,9 @@ export const getFontFamilys = (name: string, style = ''): string[] => {
     }
     return pre;
   }, []);
+  // Fallback font when style is not found.
+  if (style !== '') {
+    fontFamilies.push(name);
+  }  
+  return fontFamilies;
 };