| Name | Type | Attributes | Description |
|---|---|---|---|
style |
Partial<PIXI.ITextStyle> |
<optional> |
TextStyle properties to be set on the text. See PIXI.TextStyle.defaultStyle for the default values. |
Example
import { TextStyle } from 'pixi.js';
const style = new TextStyle({
fontFamily: ['Helvetica', 'Arial', 'sans-serif'],
fontSize: 36,
});Implements
Members
PIXI.TextStyle.defaultStyle PIXI.ITextStyle static
Default style options used for all TextStyle instances.
Properties:
| Name | Type | Default | Description |
|---|---|---|---|
align |
'left' | 'center' | 'right' | 'justify' | "left" | |
breakWords |
boolean | false | |
dropShadow |
boolean | false | |
dropShadowAlpha |
number | 1 | |
dropShadowAngle |
number | Math.PI / 6 | |
dropShadowBlur |
number | 0 | |
dropShadowColor |
string | number | "black" | |
dropShadowDistance |
number | 5 | |
fill |
string | Array<string> | number | Array<number> | CanvasGradient | CanvasPattern | "black" | |
fillGradientStops |
Array<number> | [] | |
fillGradientType |
PIXI.TEXT_GRADIENT | PIXI.TEXT_GRADIENT.LINEAR_VERTICAL | |
fontFamily |
string | Array<string> | "Arial" | |
fontSize |
number | string | 26 | |
fontStyle |
'normal' | 'italic' | 'oblique' | "normal" | |
fontVariant |
'normal' | 'small-caps' | "normal" | |
fontWeight |
'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | "normal" | |
leading |
number | 0 | |
letterSpacing |
number | 0 | |
lineHeight |
number | 0 | |
lineJoin |
'miter' | 'round' | 'bevel' | "miter" | |
miterLimit |
number | 10 | |
padding |
number | 0 | |
stroke |
string | number | "black" | |
strokeThickness |
number | 0 | |
textBaseline |
'alphabetic' | 'top' | 'hanging' | 'middle' | 'ideographic' | 'bottom' | "alphabetic" | |
trim |
boolean | false | |
whiteSpace |
'normal' | 'pre' | 'pre-line' | "pre" | |
wordWrap |
boolean | false | |
wordWrapWidth |
number | 100 |
Alignment for multiline text, does not affect single line text.
Indicates if lines can be wrapped within words, it needs wordWrap to be set to true.
Set a drop shadow for the text.
Set alpha for the drop shadow.
Set a angle of the drop shadow.
Set a shadow blur radius.
A fill style to be used on the dropshadow e.g., 'red', '#00FF00'.
Set a distance of the drop shadow.
A canvas fillstyle that will be used on the text e.g., 'red', '#00FF00'.
Can be an array to create a gradient e.g., ['#000000','#FFFFFF']
MDN
If fill is an array of colours to create a gradient, this array can set the stop points (numbers between 0 and 1) for the color, overriding the default behaviour of evenly spacing them.
fillGradientType PIXI.TEXT_GRADIENT
If fill is an array of colours to create a gradient, this can change the type/direction of the gradient.
The font family, can be a single font name, or a list of names where the first is the preferred font.
The font size (as a number it converts to px, but as a string, equivalents are '26px','20pt','160%' or '1.6em')
The font style.
The font variant.
The font weight.
The space between lines.
The amount of spacing between letters, default is 0.
The line height, a number that represents the vertical space that a letter uses.
The lineJoin property sets the type of corner created, it can resolve spiked text issues. Default is 'miter' (creates a sharp corner).
The miter limit to use when using the 'miter' lineJoin mode.
This can reduce or increase the spikiness of rendered text.
Occasionally some fonts are cropped. Adding some padding will prevent this from happening by adding padding to all sides of the text.
A canvas fillstyle that will be used on the text stroke, e.g., 'blue', '#FCFF00'
A number that represents the thickness of the stroke.
- Default Value:
- 0
The baseline of the text that is rendered.
Trim transparent borders.
How newlines and spaces should be handled. Default is 'pre' (preserve, preserve).
| value | New lines | Spaces |
|---|---|---|
| 'normal' | Collapse | Collapse |
| 'pre' | Preserve | Preserve |
| 'pre-line' | Preserve | Collapse |
Indicates if word wrap should be used.
The width at which text will wrap, it needs wordWrap to be set to true.
Methods
clone () PIXI.TextStyle
Creates a new TextStyle object with the same values as this one. Note that the only the properties of the object are cloned.
Returns:
| Type | Description |
|---|---|
| PIXI.TextStyle | New cloned TextStyle object |
Resets all properties to the defaults specified in TextStyle.prototype._default
Generates a font style string to use for TextMetrics.measureFont().
Returns:
| Type | Description |
|---|---|
| string | Font style string, for passing to TextMetrics.measureFont() |