diff --git a/web/src/core/scaler-context.ts b/web/src/core/scaler-context.ts index ace8eadbc7..9c1d4bf84e 100644 --- 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 index 0a05bca375..95d2c51424 100644 --- 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; };