diff --git a/CHANGELOG.md b/CHANGELOG.md index ad67c1cda04..178fb64b803 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,7 @@ ## [next] +- fix(Text): `_getFontDeclaration` [#9082](https://github.com/fabricjs/fabric.js/pull/9082) - chore(TS): Fix ITextBehaviour enterEditing type [#9075](https://github.com/fabricjs/fabric.js/pull/9075) - chore(TS): export FabricObjectProps and GroupProps [#9025](https://github.com/fabricjs/fabric.js/pull/9025) - chore(TS): Replace BaseFabricObject with FabricObject [#9016](https://github.com/fabricjs/fabric.js/pull/9016) diff --git a/src/shapes/Text/Text.ts b/src/shapes/Text/Text.ts index dcbe6506213..d5eeb24324c 100644 --- a/src/shapes/Text/Text.ts +++ b/src/shapes/Text/Text.ts @@ -785,9 +785,10 @@ export class Text< ) { const fontCache = cache.getFontCache(charStyle), fontDeclaration = this._getFontDeclaration(charStyle), - previousFontDeclaration = this._getFontDeclaration(prevCharStyle), couple = previousChar + _char, - stylesAreEqual = fontDeclaration === previousFontDeclaration, + stylesAreEqual = + previousChar && + fontDeclaration === this._getFontDeclaration(prevCharStyle), fontMultiplier = charStyle.fontSize / this.CACHE_FONT_SIZE; let width: number | undefined, coupleWidth: number | undefined, @@ -1640,25 +1641,31 @@ export class Text< * @returns {String} font declaration formatted for canvas context. */ _getFontDeclaration( - styleObject?: TextStyleDeclaration, + { + fontFamily = this.fontFamily, + fontStyle = this.fontStyle, + fontWeight = this.fontWeight, + fontSize = this.fontSize, + }: Partial< + Pick< + TextStyleDeclaration, + 'fontFamily' | 'fontStyle' | 'fontWeight' | 'fontSize' + > + > = {}, forMeasuring?: boolean ): string { - const style = styleObject || this, - family = this.fontFamily, - fontIsGeneric = Text.genericFonts.indexOf(family.toLowerCase()) > -1; - const fontFamily = - family === undefined || - family.indexOf("'") > -1 || - family.indexOf(',') > -1 || - family.indexOf('"') > -1 || - fontIsGeneric - ? style.fontFamily - : `"${style.fontFamily}"`; + const parsedFontFamily = + fontFamily.includes("'") || + fontFamily.includes('"') || + fontFamily.includes(',') || + Text.genericFonts.includes(fontFamily.toLowerCase()) + ? fontFamily + : `"${fontFamily}"`; return [ - style.fontStyle, - style.fontWeight, - forMeasuring ? this.CACHE_FONT_SIZE + 'px' : style.fontSize + 'px', - fontFamily, + fontStyle, + fontWeight, + `${forMeasuring ? this.CACHE_FONT_SIZE : fontSize}px`, + parsedFontFamily, ].join(' '); } diff --git a/test/unit/text.js b/test/unit/text.js index fa6c3919f6b..16661aafeab 100644 --- a/test/unit/text.js +++ b/test/unit/text.js @@ -97,6 +97,8 @@ text.fontFamily = '\'Times New Roman\''; fontDecl = text._getFontDeclaration(); assert.equal(fontDecl, 'normal normal 40px \'Times New Roman\''); + fontDecl = text._getFontDeclaration({ fontFamily: 'Arial' }); + assert.equal(fontDecl, 'normal normal 40px \"Arial\"', 'passed style should take precedence'); }); QUnit.test('_getFontDeclaration with coma', function(assert) {