Skip to content

Commit eeb00c1

Browse files
committed
Docs: when to quote fontFamily
Fixes phaserjs#5076
1 parent f57c0a3 commit eeb00c1

1 file changed

Lines changed: 28 additions & 25 deletions

File tree

src/gameobjects/text/static/Text.js

Lines changed: 28 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,17 @@ var TextStyle = require('../TextStyle');
2727
* Because it uses the Canvas API you can take advantage of all the features this offers, such as
2828
* applying gradient fills to the text, or strokes, shadows and more. You can also use custom fonts
2929
* loaded externally, such as Google or TypeKit Web fonts.
30-
*
31-
* **Important:** If the font you wish to use has a space or digit in its name, such as
32-
* 'Press Start 2P' or 'Roboto Condensed', then you _must_ put the font name in quotes, either
33-
* when creating the Text object, or when setting the font via `setFont` or `setFontFamily`. I.e.:
34-
*
30+
*
31+
* **Important:** The font name must be quoted if it contains certain combinations of digits or
32+
* special characters, either when creating the Text object, or when setting the font via `setFont`
33+
* or `setFontFamily`, e.g.:
34+
*
3535
* ```javascript
36-
* this.add.text(0, 0, 'Hello World', { fontFamily: '"Roboto Condensed"' });
36+
* this.add.text(0, 0, 'Hello World', { fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif' });
3737
* ```
38-
*
39-
* Equally, if you wish to provide a list of fallback fonts, then you should ensure they are all
40-
* quoted properly, too:
41-
*
38+
*
4239
* ```javascript
43-
* this.add.text(0, 0, 'Hello World', { fontFamily: 'Verdana, "Times New Roman", Tahoma, serif' });
40+
* this.add.text(0, 0, 'Hello World', { font: '"Press Start 2P"' });
4441
* ```
4542
*
4643
* You can only display fonts that are currently loaded and available to the browser: therefore fonts must
@@ -82,6 +79,8 @@ var TextStyle = require('../TextStyle');
8279
* @param {number} y - The vertical position of this Game Object in the world.
8380
* @param {(string|string[])} text - The text this Text object will display.
8481
* @param {Phaser.Types.GameObjects.Text.TextStyle} style - The text style configuration object.
82+
*
83+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Valid_family_names
8584
*/
8685
var Text = new Class({
8786

@@ -643,19 +642,19 @@ var Text = new Class({
643642
*
644643
* If an object is given, the `fontFamily`, `fontSize` and `fontStyle`
645644
* properties of that object are set.
646-
*
647-
* **Important:** If the font you wish to use has a space or digit in its name, such as
648-
* 'Press Start 2P' or 'Roboto Condensed', then you _must_ put the font name in quotes:
649-
*
645+
*
646+
* **Important:** The font name must be quoted if it contains certain combinations of digits or
647+
* special characters:
648+
*
650649
* ```javascript
651-
* Text.setFont('"Roboto Condensed"');
650+
* Text.setFont('"Press Start 2P"');
652651
* ```
653-
*
652+
*
654653
* Equally, if you wish to provide a list of fallback fonts, then you should ensure they are all
655654
* quoted properly, too:
656-
*
655+
*
657656
* ```javascript
658-
* Text.setFont('Verdana, "Times New Roman", Tahoma, serif');
657+
* Text.setFont('Georgia, "Goudy Bookletter 1911", Times, serif');
659658
* ```
660659
*
661660
* @method Phaser.GameObjects.Text#setFont
@@ -664,6 +663,8 @@ var Text = new Class({
664663
* @param {string} font - The font family or font settings to set.
665664
*
666665
* @return {this} This Text object.
666+
*
667+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Valid_family_names
667668
*/
668669
setFont: function (font)
669670
{
@@ -672,19 +673,19 @@ var Text = new Class({
672673

673674
/**
674675
* Set the font family.
675-
*
676-
* **Important:** If the font you wish to use has a space or digit in its name, such as
677-
* 'Press Start 2P' or 'Roboto Condensed', then you _must_ put the font name in quotes:
678-
*
676+
*
677+
* **Important:** The font name must be quoted if it contains certain combinations of digits or
678+
* special characters:
679+
*
679680
* ```javascript
680-
* Text.setFont('"Roboto Condensed"');
681+
* Text.setFont('"Press Start 2P"');
681682
* ```
682683
*
683684
* Equally, if you wish to provide a list of fallback fonts, then you should ensure they are all
684685
* quoted properly, too:
685686
*
686687
* ```javascript
687-
* Text.setFont('Verdana, "Times New Roman", Tahoma, serif');
688+
* Text.setFont('Georgia, "Goudy Bookletter 1911", Times, serif');
688689
* ```
689690
*
690691
* @method Phaser.GameObjects.Text#setFontFamily
@@ -693,6 +694,8 @@ var Text = new Class({
693694
* @param {string} family - The font family.
694695
*
695696
* @return {this} This Text object.
697+
*
698+
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Valid_family_names
696699
*/
697700
setFontFamily: function (family)
698701
{

0 commit comments

Comments
 (0)