GitHub - greco/Font.js: This library adds a new Font() object to the JavaScript toolbox, similar to new Image() for images

greco / Font.js Public

forked from Pomax/lib-font

Notifications You must be signed in to change notification settings
Fork 0
Star 1

This library adds a new Font() object to the JavaScript toolbox, similar to new Image() for images

pomax.nihongoresources.com/pages/Font.js

1 star 72 forks Branches Tags Activity

Star

Notifications

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
Font.js		Font.js
README		README

Repository files navigation

=====  Font.js =====

Font.js adds new Font() functionality to the JavaScript
toolbox, akin to how you use new Image() for images. It
adds an onload event hook so that you don't deploy a
font resource on your webpage before it's actually ready
for use, as browsers can tell you when a font has
downloaded, but not when it has been parsed and made
ready for on-page rendering. This object can.

The API is pretty straight forward:

  constructor
    var font = new Font()

  load event handler
    font. {
      /* your code here */
    }

  error event handler
    font. {
      /* your code here */
    }

  name assignment
    font.fontFamily = "name goes here"

  font loading
    font.src = "http://your.font.location/here.ttf"

    (!) This lines will kick off font loading and
    will make the font available on-page.

  DOM removal
    document.head.removeChild(font.toStyleNode())

  DOM (re)insertion
    document.head.appendChild(font.toStyleNode())

    (!) This is only required if you removed the
    font from the page, as the font is added to the
    DOM for use on-page during font loading already.

Font Metrics API:

    font.metrics.quadsize
      The font-indicated number of units per em
    
    font.metrics.leading
      The font-indicated line height, in font units
      (this vaue is, often, useless)

    font.metrics.ascent
      The maximum ascent for this font, as a ratio
      of the fontsize

    font.metrics.decent
      The maximum descent for this font, as a ratio
      of the fontsize

    font.metrics.weightclass
      The font-indicated weight class

Text Metrics API:

    font.measureText(string, size)
      Compute the metrics for a particular string, with
      this font applied at the specific font size in pixels

    font.measureText(...).width
      the width of the string in pixels, using this font
      at the specified font size

    font.measureText(...).fontsize
      the specified font size

    font.measureText(...).height
      the height of the string. This may differ from the
      font size

    font.measureText(...).leading
      the actual line spacing for this font based on ten
      lines.

    font.measureText(...).ascent
      the ascent above the baseline for this string

    font.measureText(...).descent
      the descent below the baseline for this string

    font.measureText(...).bounds
      An object {xmin:<num>, ymin:<num>, xmax:<num>,
      ymax:<num>} indicating the string's bounding box.

When font.src is set, the whole shebang kicks in, just
like for new Image(), so make sure to define your onload()
handler BEFORE setting the "src" property, or your handler
may not get called.

A demonstrator of this object can be found at:

  http://pomax.nihongoresources.com/pages/Font.js

This code is (c) Mike "Pomax" Kamermans, 2012, but
licensed under the MIT ("expat" flavour) license.