refactor font registration API

[tj]

var pfennigFont = new Font('pfennigFont', fontFile('Pfennig.ttf'));
pfennigFont.addFace(fontFile('PfennigBold.ttf'),   'bold');
pfennigFont.addFace(fontFile('PfennigItalic.ttf'), 'normal', 'italic');
pfennigFont.addFace(fontFile('PfennigBoldItalic.ttf'), 'bold', 'italic');

to something like:

canvas
  .font('file.ttf', 'name')
  .face('file-bold.ttf', 'bold')
  .face('file-italic.ttf', 'normal', 'italic')

[terrancesnyder]

+1

[zbjornson]

Ironically the original new Font API was closer to the new CSS Font Loading Module Level 3 specs than the current registerFont(path, {family, weight, style}) API is.

https://developer.mozilla.org/en-US/docs/Web/API/FontFace/FontFace

new FontFace(family, source, descriptors)
new FontFace("Comic Sans", "url(comicsans.ttf)", {style: "normal"})

Chrome 35, FF 41 and Safari 11.1 have it. Edge 17 does not. The awkward part about it for node-canvas is that the source is supposed to have the url() bit (but maybe we could dispense with that because local file paths aren't URLs?).

Our impl would look something like:

const bindings = require('./lib/bindings')
const fs = require('fs')

function FontFace(family, source, descriptors = {}) {
  if (!(this instanceof FontFace)) {
    throw new TypeError("Class constructors cannot be invoked without 'new'")
  }

  if (!descriptors.family) descriptors.family = family
  this.family = descriptors.family
  this.style = descriptors.style || 'normal'
  this.weight = descriptors.weight || 'normal'

  // read-only. Synchronous for now
  Object.defineProperty(this, 'status', {
    get: function () { return 'loaded' }
  })

  // TODO what do we do about `url(font.ttf)`?

  bindings.Canvas._registerFont(fs.realpathSync(source), descriptors)
}

module.exports = FontFace

---

Should we switch to that, or stick with registerFont()?

[LinusU]

I'm all for switching to match closely with the standard!

what do we do about url(font.ttf)?

Maybe we could do something like:

• let base be `file://${process.cwd()}/`
• if input matches url\((.*)\)
  • new URL($1, base)
• else
  • new URL(input, base)

e.g. (with base = file:///Users/linus/)

• 'font.ttf' -> 'file:///Users/linus/font.ttf'
• '../font.ttf' -> 'file:///Users/font.ttf'
• '/tmp/font.ttf' -> 'file:///tmp/font.ttf'
• 'https://google.com/font.ttf' -> 'https://google.com/font.ttf'
• 'url(font.ttf)' -> 'file:///Users/linus/font.ttf'
• 'url(../font.ttf)' -> 'file:///Users/font.ttf'
• 'url(/tmp/font.ttf)' -> 'file:///tmp/font.ttf'
• 'url(https://google.com/font.ttf)' -> 'https://google.com/font.ttf'

[LinusU]

const { URL } = require('url')

parseFontSouce (input) {
  const base = `file://${process.cwd()}/`
  const reUrl = /url\((.*)\)/
  const result = reUrl.exec(input)
  return new URL(result ? result[1] : input, base)
}