What are the fontStyle possible values?

Phaser 3
1

Hi,
I was going through the docs about text Game Objects because I wanted to understand what are all the possible properties that can be passed to a text in order to style it.
I see that something like fontWeight doesn’t exist, thus I understand that the properties are not all those that are available for styling text in CSS.

To make a fontWeight for example I could use stroke and strokeThickness but this way I would cut the opportunity to add an outline to the text.

Here I found all the possible styles that can be passed to a text Game Object and I was curious about what fontStyle is, the description is terrible:

Any addition font styles, such as ‘strong’.

What does this mean? strong in HTML is an element not a style, while the font-style property in CSS doesn’t allow strong as a possible value.

So I am very confused. Can anyone help please?
https://newdocs.phaser.io/docs/3.54.0/Phaser.GameObjects.TextStyle#fontStyle

2

The entire font style is the same format as the font on a canvas, which in turn uses the syntax of the CSS font property.

3

Hi Telinc1, thank you for your answer, I’m still a bit confused, so to recap: the property fontStyle of the text Object in Phaser is the same as the .font property of the Canvas 2D API.
The MDN page about it states:

This string uses the same syntax as the CSS font specifier

and the CSS font is a shorthand rule for:

  • font-family
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • line-height

Basically fontStyle in Phaser can represent all of these possible values?

4

Sorry, I should have been clearer in my previous post. The overall font of a Text object is controlled by fontStyle, fontSize, and fontFamily. fontStyle can correspond to font-style, font-variant, or font-weight in CSS. You can set all properties at once with setFont, which uses the syntax of CSS’s font.

1 Like
5

Thank you! I’m still new to Phaser and I need to learn more about it. Could you suggest any other resource than the official docs (which I find a tad spartan)?

6

You can try rexrainbow’s notes. They’re friendlier than the formal API docs.

1 Like