Class Font

Hierarchy

  • Font

Constructors

Properties

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

These font files will be loaded from the CDN specified by Font.HOST_URL. await VexFlow.loadFonts() loads all of the fonts below. Useful during debugging. await VexFlow.loadFonts(FontName1, FontName2) loads only the specified fonts.

HOST_URL: string = 'https://cdn.jsdelivr.net/npm/@vexflow-fonts/'

Customize this field to specify a different CDN for delivering web fonts. Discussion on GDPR concerns: https://www.jsdelivr.com/blog/how-the-german-courts-ruling-on-google-fonts-affects-jsdelivr-and-why-it-is-safe-to-use/

You can also self host, and specify your own server URL here.

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

  • Parameters

    • fontSize: string | number

      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

  • Parameters

    • fontSize: string | number

      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

  • Parameters

    • cssFontShorthand: string

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

    Returns Required<FontInfo>

  • 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.

  • Parameters

    • Optional style: string

    Returns boolean

    true if the font style indicates 'italic'.

  • This method is asynchronous, so you should use await or .then() to wait for the fonts to load before proceeding.

    Parameters

    Returns Promise<FontFace>

  • Type Parameters

    • T extends 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.

  • Parameters

    Returns string

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

  • 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').