Documentation

Font

Source: AWT.js:38

Font contains properties and provides methods to manage fonts

Constructor

new Font( family?: string, size?: number, bold?: number, italic?: number, variant?: string, ): Font

Font constructor

Parameters

  • family (string, optional, default: "'Arial'")
  • size (number, optional, default: 17)
  • bold (number, optional, default: 0)
  • italic (number, optional, default: 0)
  • variant (string, optional, default: "''")

Instance Methods

setProperties($xml: external:jQuery): module:AWT.Font

AWT.js:141

Reads the properties of this Font from an XML element

Parameters

Returns

getAttributes(): object

AWT.js:161

Gets a object with the basic attributes needed to rebuild this instance excluding functions,
parent references, constants and also attributes retaining the default value.
The resulting object is commonly usued to serialize elements in JSON format.

Returns

  • object

setAttributes(data: object): module:AWT.Font

AWT.js:170

Reads the properties of this Font from a data object

Parameters

  • data (object) — The data object to be parsed

Returns

setSize(size: number): module:AWT.Font

AWT.js:179

Allows to change the size member, recalculating the vertical metrics.

Parameters

  • size (number) — The new size to set

Returns

zoom(amount: number): module:AWT.Font

AWT.js:192

Increases or decreases the current font size by the specified amount

Parameters

  • amount (number) — The amount to increase or decrease current size

Returns

getMetrics(): Object

AWT.js:200

Calculates the font metrics

Returns

  • Object

getHeight(): number

AWT.js:220

Calculates the font metrics and returns its height

Returns

  • number

toCss(css: object): object

AWT.js:231

Translates the Font properties into CSS statements

Parameters

  • css (object) — The object where to add CSS properties. When null or undefined, a new
    object will be created and returned.

Returns

  • object

cssFont(): string

AWT.js:250

Gets the codification of this font in a single string, suitable to be used in a font
CSS attribute.

Returns

  • string

_calcHeight(): module:AWT.Font

AWT.js:267

The TextMetrics object used
by CanvasRenderingContext2D
does not provide a heigth value for rendered text.
This stackoverflow question
has an excellent response by Daniel Earwicker explaining how to measure the
vertical dimension of rendered text using a span element.
The code has been slighty adapted to deal with Font objects.

Warning: Do not call this method direcly. Use getHeight() or getMetrics() instead

Returns

equals(font: module:AWT.Font): boolean

AWT.js:291

Checks if two Font objects are equivalent

Parameters

Returns

  • boolean

Static Methods

checkTree($tree: external:jQuery, options?: object)

static
AWT.js:68

Finds the XML elements with typeface specifications, checks its value against the font
substitution list, replacing the family attribute and loading the alternative font when needed.

Parameters

  • $tree (external:jQuery) — The xml element to be processed
  • options (object, optional) — Optional param that can contain a fontSubstitutions attribute with
    a substition table to be added to SUBSTITUTIONS

loadGoogleFont(name: string)

static
AWT.js:119

Try to load a specific font from [http://www.google.com/fonts]

Parameters

  • name (string) — The font family name

loadGoogleFonts(fonts: Array.<string>)

static
AWT.js:131

Try to load a set of Google fonts

Parameters

  • fonts (Array.<string>) — An array of font names

Instance Fields

family: string

AWT.js:350

The font-family property

size: number

AWT.js:356

The font size
Warning: Do not change size directly. Use setSize() instead.

bold: number

AWT.js:361

The font bold value

italic: number

AWT.js:366

The font italic value

variant: string

AWT.js:371

The font variant value

Static Fields

ALREADY_CALCULATED_FONTS

static
AWT.js:303

Array of font objects with already calculated heights

ALREADY_LOADED_FONTS

static
AWT.js:308

Array of font names already loaded from Google Fonts, or generic names provided by browsers by default
See: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family

SUBSTITUTIONS

static
AWT.js:318

Google Fonts equivalent for special fonts used in some JClic projects.
More substitutions can be added to the list for specific projects indicating a
fontSubstitutions object in the data-options attribute of the HTML div element
containing the player.
For example:
<div class ="JClic" data-project="demo.jclic" data-options='{"fontSubstitutions":{"arial":"Arimo"}}'/>

GOOGLEFONTS

static
AWT.js:341

Google Fonts currently used in substitutions