Class “Font”

Object > Font

Represents a font. See also FontValue

Type: Font extends Object
Constructor: public
Singleton: No
Namespace: tabris
Direct subclasses: None
JSX Support: No

Examples

JavaScript

import {Font} from 'tabris';

const font = Font.from('bold 24px');
console.log(font.size); // 24

See also:

JS Applying multiple font styles to TextViews [► Run in Playground]

Constructor

new Font(size, family?, weight?, style?)

Parameter Type Description
size number Positive number in dip
family string[] Prioritized list of font families Optional.
weight 'black'
| 'bold'
| 'medium'
| 'thin'
| 'light'
| 'normal'
Boldness of the font Optional.
style 'italic' | 'normal' Face of the font family to be used Optional.

Methods

equals(value)

Tests if the given value is a Font instance that is deeply equal to this one.

Parameter Type Description
value Font  

Returns: boolean

toString()

Returns a string representation of the font using the CSS font shorthand syntax.

Returns: string

Static Methods

from(fontValue)

Creates a new instance of Font using any valid font expression. For any other value, including null and 'initial' the method throws.

Parameter Type Description
fontValue FontValue The value to create a Font instance from

Returns: Font

isFontValue(value)

Returns true if value is a FontValue. This includes null and 'initial'. Use this to check if a value will be accepted by a font property. This is also a valid TypeScript type guard function.

Parameter Type Description
value any The value to test

Returns: boolean

isValidFontValue(value)

Returns true if value is a valid FontValue. This excludes null and 'initial'. Use this to check if a value will be accepted by Font.from. This is also a valid TypeScript type guard function.

Parameter Type Description
value any The value to test

Returns: value is FontValue

Properties

family

Prioritized list of font families

Type: string[]
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

size

Positive number in dip

Type: number
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

style

Face of the font family to be used

Type: 'italic' | 'normal'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

weight

Boldness of the font

Type: 'black'
| 'bold'
| 'medium'
| 'thin'
| 'light'
| 'normal'
Settable: No

This property can only be set via constructor. Once set, it cannot change anymore.

Static Properties

condensed

Type: "condensed"
Settable: No

monospace

Type: "monospace"
Settable: No

sansSerif

Type: "sans-serif"
Settable: No

serif

Type: "serif"
Settable: No

FontValue

  • JavaScript Type: tabris.Font, Object, string
  • TypeScript Type: tabris.FontValue

A FontValue describes a font by size, family, weight and style. This type allows various expressions that can all be used in place of a Font instance for convenience. All API that accept these expressions will convert them to a Font object. (With the exception of CanvasContext.) Setting a FontValue property to null resets it to the default.

Generic font size is always given as DIP (device independent pixels), though the string shorthand expects "px" as a unit. It’s still DIPs.

Generic font families are supported across all platforms: "serif", "sans-serif", "condensed" and "monospace". These are available as static string properties of Font, e.g. Font.serif. These exist just to help with autocompletion. More families can be added via app.registerFont. If no family is given for a font the system default is used. If no font family is given the default system font will be used. The string "initial" represents the platform default.

Supported font weights are "light", "thin", "normal", "medium", "bold" and "black". The default is "normal"

Supported font styles are "italic" and "normal". The default is "normal"

In TypeScript you can import this type as a union with import {FontValue} from 'tabris'; or use tabris.FontValue. Type guards for FontValue are available as Font.isFontValue and Font.isValidFontValue.

In addition to Font instances FontValue includes:

FontLikeObject

  • JavaScript Type: Object
  • TypeScript Type: tabris.FontLikeObject
interface FontLikeObject {
  size: number;
  family?: string[];
  weight?: FontWeight;
  style?: FontStyle;
}

A plain object implementing the same properties as Font.

Examples:

{size: 16, weight: 'bold'}
{size: 24, family: 'sans-serif', style: 'italic'}

FontString

  • JavaScript Type: string
  • TypeScript Type: tabris.FontString

As a string, a subset of the shorthand syntax known from CSS is used: "font-style font-weight font-size font-family", where every value except size is optional. The size also need to have a "px" postfix. Multiple families may be given separated by commas. Families with spaces in their name need to be put in single or double quotes.

Examples:

"bold 24px"
"12px sans-serif"
"italic thin 12px sans-serif"
"24px 'My Font', sans-serif"
"initial"