diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 4e94f6b..9043b36 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -735,7 +735,29 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; + // Clean-up fontFamily property by quoting each font name + // this will support font names with spaces + let fontFamilies = style.fontFamily; + + if (!Array.isArray(style.fontFamily)) + { + fontFamilies = style.fontFamily.split(','); + } + + for (let i = fontFamilies.length - 1; i >= 0; i--) + { + // Trim any extra white-space + let fontFamily = fontFamilies[i].trim(); + + // Check if font already contains strings + if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily)) + { + fontFamily = `"${fontFamily}"`; + } + fontFamilies[i] = fontFamily; + } + + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${fontFamilies.join(',')}`; } /** diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 4e94f6b..9043b36 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -735,7 +735,29 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; + // Clean-up fontFamily property by quoting each font name + // this will support font names with spaces + let fontFamilies = style.fontFamily; + + if (!Array.isArray(style.fontFamily)) + { + fontFamilies = style.fontFamily.split(','); + } + + for (let i = fontFamilies.length - 1; i >= 0; i--) + { + // Trim any extra white-space + let fontFamily = fontFamilies[i].trim(); + + // Check if font already contains strings + if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily)) + { + fontFamily = `"${fontFamily}"`; + } + fontFamilies[i] = fontFamily; + } + + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${fontFamilies.join(',')}`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index faeb91c..581e5aa 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -57,7 +57,7 @@ * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} * @param {number} [style.fillGradientType=PIXI.TEXT_GRADIENT.LINEAR_VERTICAL] - If fills styles are * supplied, this can change the type/direction of the gradient. See {@link PIXI.TEXT_GRADIENT} for possible values - * @param {string} [style.fontFamily='Arial'] - The font family + * @param {string|Array} [style.fontFamily='Arial'] - The font family * @param {number|string} [style.fontSize=26] - The font size (as a number it converts to px, but as a string, * equivalents are '26px','20pt','160%' or '1.6em') * @param {string} [style.fontStyle='normal'] - The font style ('normal', 'italic' or 'oblique') diff --git a/src/core/text/Text.js b/src/core/text/Text.js index 4e94f6b..9043b36 100644 --- a/src/core/text/Text.js +++ b/src/core/text/Text.js @@ -735,7 +735,29 @@ // build canvas api font setting from individual components. Convert a numeric style.fontSize to px const fontSizeString = (typeof style.fontSize === 'number') ? `${style.fontSize}px` : style.fontSize; - return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} "${style.fontFamily}"`; + // Clean-up fontFamily property by quoting each font name + // this will support font names with spaces + let fontFamilies = style.fontFamily; + + if (!Array.isArray(style.fontFamily)) + { + fontFamilies = style.fontFamily.split(','); + } + + for (let i = fontFamilies.length - 1; i >= 0; i--) + { + // Trim any extra white-space + let fontFamily = fontFamilies[i].trim(); + + // Check if font already contains strings + if (!(/([\"\'])[^\'\"]+\1/).test(fontFamily)) + { + fontFamily = `"${fontFamily}"`; + } + fontFamilies[i] = fontFamily; + } + + return `${style.fontStyle} ${style.fontVariant} ${style.fontWeight} ${fontSizeString} ${fontFamilies.join(',')}`; } /** diff --git a/src/core/text/TextStyle.js b/src/core/text/TextStyle.js index faeb91c..581e5aa 100644 --- a/src/core/text/TextStyle.js +++ b/src/core/text/TextStyle.js @@ -57,7 +57,7 @@ * {@link https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle|MDN} * @param {number} [style.fillGradientType=PIXI.TEXT_GRADIENT.LINEAR_VERTICAL] - If fills styles are * supplied, this can change the type/direction of the gradient. See {@link PIXI.TEXT_GRADIENT} for possible values - * @param {string} [style.fontFamily='Arial'] - The font family + * @param {string|Array} [style.fontFamily='Arial'] - The font family * @param {number|string} [style.fontSize=26] - The font size (as a number it converts to px, but as a string, * equivalents are '26px','20pt','160%' or '1.6em') * @param {string} [style.fontStyle='normal'] - The font style ('normal', 'italic' or 'oblique') diff --git a/test/core/Text.js b/test/core/Text.js index 4f67752..b8ce561 100644 --- a/test/core/Text.js +++ b/test/core/Text.js @@ -2,6 +2,40 @@ describe('PIXI.Text', function () { + describe('getFontStyle', function () + { + it('should be a valid API', function () + { + expect(PIXI.Text.getFontStyle).to.be.a.function; + }); + + it('should assume pixel fonts', function () + { + const style = PIXI.Text.getFontStyle({ fontSize: 72 }); + + expect(style).to.be.a.string; + expect(style).to.have.string(' 72px '); + }); + + it('should handle multiple fonts as array', function () + { + const style = PIXI.Text.getFontStyle({ + fontFamily: ['Georgia', 'Arial', 'sans-serif'], + }); + + expect(style).to.have.string('"Georgia","Arial","sans-serif"'); + }); + + it('should handle multiple fonts as string', function () + { + const style = PIXI.Text.getFontStyle({ + fontFamily: 'Georgia, "Arial", sans-serif', + }); + + expect(style).to.have.string('"Georgia","Arial","sans-serif"'); + }); + }); + describe('destroy', function () { it('should call through to Sprite.destroy', function ()