Skip to content

Font

Overview

Immutable font object.

Examples: new phet.scenery.Font().font // "10px sans-serif" (the default) new phet.scenery.Font( { family: 'serif' } ).font // "10px serif" new phet.scenery.Font( { weight: 'bold' } ).font // "bold 10px sans-serif" new phet.scenery.Font( { size: 16 } ).font // "16px sans-serif" var font = new phet.scenery.Font( { family: '"Times New Roman", serif', style: 'italic', lineHeight: 10 } ); font.font; // "italic 10px/10 'Times New Roman', serif" font.family; // "'Times New Roman', serif" font.weight; // 400 (the default)

Useful specs: http://www.w3.org/TR/css3-fonts/

@author Jonathan Olson <jonathan.olson@colorado.edu>

Class Font

import { Font } from 'scenerystack/scenery';

Constructor

new Font( providedOptions? : FontOptions )

Instance Methods

getFont() : string

Returns this font's CSS shorthand, which includes all of the font's information reduced into a single string.

This can be used for CSS as the 'font' attribute, or is needed to set Canvas fonts.

https://www.w3.org/TR/css-fonts-3/#propdef-font contains detailed information on how this is formatted.

getStyle() : FontStyle

Returns this font's style. See the constructor for more details on valid values.

getVariant() : FontVariant

Returns this font's variant. See the constructor for more details on valid values.

getWeight() : FontWeight

Returns this font's weight. See the constructor for more details on valid values.

NOTE: If a numeric weight was passed in, it has been cast to a string, and a string will be returned here.

getStretch() : FontStretch

Returns this font's stretch. See the constructor for more details on valid values.

getSize() : string

Returns this font's size. See the constructor for more details on valid values.

NOTE: If a numeric size was passed in, it has been cast to a string, and a string will be returned here.

getNumericSize() : number

Returns an approximate value of this font's size in px.

getLineHeight() : string

Returns this font's line-height. See the constructor for more details on valid values.

getFamily() : string

Returns this font's family. See the constructor for more details on valid values.

copy( options? : FontOptions ) : Font

Returns a new Font object, which is a copy of this object. If options are provided, they override the current values in this object.

toCSS() : string

Returns this font's CSS shorthand, which includes all of the font's information reduced into a single string.

NOTE: This is an alias of getFont().

This can be used for CSS as the 'font' attribute, or is needed to set Canvas fonts.

https://www.w3.org/TR/css-fonts-3/#propdef-font contains detailed information on how this is formatted.

Static Methods

castSize( size : string | number ) : string

Converts a generic size to a specific CSS pixel string, assuming 'px' for numbers.

@param size - If it's a number, 'px' will be appended

isFontStyle( style : string ) : style is FontStyle

isFontVariant( variant : string ) : variant is FontVariant

isFontWeight( weight : string ) : weight is FontWeight

isFontStretch( stretch : string ) : stretch is FontStretch

fromCSS( cssString : string ) : Font

Parses a CSS-compliant "font" shorthand string into a Font object.

Font strings should be a valid CSS3 font declaration value (see http://www.w3.org/TR/css3-fonts/) which consists of the following pattern: [ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ]

Static Properties

FontIO : IOType<Font, FontState>

DEFAULT : Font

(readonly)

{Font} - Default Font object (since they are immutable).

Type FontOptions

import type { FontOptions } from 'scenerystack/scenery';

Type FontStretch

import type { FontStretch } from 'scenerystack/scenery';

"normal" | "ultra-condensed" | "extra-condensed" | "condensed" | "semi-condensed" | "semi-expanded" | "expanded" | "extra-expanded" | "ultra-expanded"

Type FontStyle

import type { FontStyle } from 'scenerystack/scenery';

"normal" | "italic" | "oblique"

Type FontWeight

import type { FontWeight } from 'scenerystack/scenery';

"normal" | "bold" | "bolder" | "lighter" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"

Source Code

See the source for Font.ts in the scenery repository.