Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Font

Hierarchy

  • Font

Index

Properties

Static SANS_SERIF

SANS_SERIF: string = 'Arial, sans-serif'

Default sans-serif font family.

Static SERIF

SERIF: string = 'Times New Roman, serif'

Default serif font family.

Static SIZE

SIZE: number = 10

Default font size in pt.

Static WEB_FONT_FILES

WEB_FONT_FILES: Record<string, string> = ...

These font files will be loaded from the CDN specified by Font.WEB_FONT_HOST when await Font.loadWebFonts() is called. Customize this field to specify a different set of fonts to load. See: Font.loadWebFonts().

Static WEB_FONT_HOST

WEB_FONT_HOST: string = 'https://unpkg.com/vexflow-fonts@1.0.3/'

Customize this field to specify a different CDN for delivering web fonts. Alternative: https://cdn.jsdelivr.net/npm/vexflow-fonts@1.0.3/ Or you can use your own host.

Static scaleToPxFrom

scaleToPxFrom: Record<string, number> = ...

Given a length (for units: pt, px, em, %, in, mm, cm) what is the scale factor to convert it to px?

Methods

getData

getGlyphs

getMetrics

getName

  • getName(): string
  • Returns string

getResolution

  • getResolution(): number
  • Returns number

hasData

  • hasData(): boolean
  • Returns boolean

lookupMetric

  • lookupMetric(key: string, defaultValue?: number | Record<string, any>): any
  • Use the provided key to look up a value in this font's metrics file (e.g., bravura_metrics.ts, petaluma_metrics.ts).

    Parameters

    • key: string

      is a string separated by periods (e.g., stave.endPaddingMax, clef.lineCount.'5'.shiftY).

    • Optional defaultValue: number | Record<string, any>

      is returned if the lookup fails.

    Returns any

    the retrieved value (or defaultValue if the lookup fails).

setData

setMetrics

toString

  • toString(): string
  • For debugging.

    Returns string

Static convertSizeToPixelValue

  • convertSizeToPixelValue(fontSize?: string | number): number
  • Parameters

    • fontSize: string | number = Font.SIZE

      a font size to convert. Can be specified as a CSS length string (e.g., '16pt', '1em') or as a number (the unit is assumed to be 'pt'). See Font.scaleToPxFrom for the supported units (e.g., pt, em, %).

    Returns number

    the number of pixels that is equivalent to fontSize

Static convertSizeToPointValue

  • convertSizeToPointValue(fontSize?: string | number): number
  • Parameters

    • fontSize: string | number = Font.SIZE

      a font size to convert. Can be specified as a CSS length string (e.g., '16pt', '1em') or as a number (the unit is assumed to be 'pt'). See Font.scaleToPxFrom for the supported units (e.g., pt, em, %).

    Returns number

    the number of points that is equivalent to fontSize

Static fromCSSString

  • fromCSSString(cssFontShorthand: string): Required<FontInfo>
  • Parameters

    • cssFontShorthand: string

      a string formatted as CSS font shorthand (e.g., 'italic bold 15pt Arial').

    Returns Required<FontInfo>

Static isBold

  • isBold(weight?: string | number): boolean
  • Parameters

    • Optional weight: string | number

      a string (e.g., 'bold') or a number (e.g., 600 / semi-bold in the OpenType spec).

    Returns boolean

    true if the font weight indicates bold.

Static isItalic

  • isItalic(style?: string): boolean
  • Parameters

    • Optional style: string

    Returns boolean

    true if the font style indicates 'italic'.

Static load

  • Parameters

    • fontName: string
    • Optional data: FontData

      optionally set the Font object's .data property. This is usually done when setting up a font for the first time.

    • Optional metrics: FontMetrics

      optionally set the Font object's .metrics property. This is usually done when setting up a font for the first time.

    Returns Font

    a Font object with the given fontName. Reuse an existing Font object if a matching one is found.

Static loadWebFont

  • loadWebFont(fontName: string, woffURL: string, includeWoff2?: boolean): Promise<FontFace>
  • Parameters

    • fontName: string
    • woffURL: string

      The absolute or relative URL to the woff file.

    • includeWoff2: boolean = true

      If true, we assume that a woff2 file is in the same folder as the woff file, and will append a 2 to the url.

    Returns Promise<FontFace>

Static loadWebFonts

  • loadWebFonts(): Promise<void>
  • Load the web fonts that are used by ChordSymbol. For example, flow.html calls: await Vex.Flow.Font.loadWebFonts(); Alternatively, you may load web fonts with a stylesheet link (e.g., from Google Fonts), and a @font-face { font-family: ... } rule in your CSS. If you do not load either of these fonts, ChordSymbol will fall back to Times or Arial, depending on the current music engraving font.

    You can customize Font.WEB_FONT_HOST and Font.WEB_FONT_FILES to load different fonts for your app.

    Returns Promise<void>

Static scaleSize

  • scaleSize<T>(fontSize: T, scaleFactor: number): T
  • Type parameters

    • T: string | number

    Parameters

    • fontSize: T

      a number representing a font size, or a string font size with units.

    • scaleFactor: number

      multiply the size by this factor.

    Returns T

    size * scaleFactor (e.g., 16pt * 3 = 48pt, 8px * 0.5 = 4px, 24 * 2 = 48). If the fontSize argument was a number, the return value will be a number. If the fontSize argument was a string, the return value will be a string.

Static toCSSString

  • toCSSString(fontInfo?: FontInfo): string
  • Parameters

    Returns string

    a CSS font shorthand string of the form italic bold 16pt Arial.

Static validate

  • validate(f?: string | FontInfo, size?: string | number, weight?: string | number, style?: string): Required<FontInfo>
  • Parameters

    • Optional f: string | FontInfo
    • Optional size: string | number
    • Optional weight: string | number
    • Optional style: string

    Returns Required<FontInfo>

    the size field will include the units (e.g., '12pt', '16px').