字体测量

font-metrics.js

function fontMetrics (family, size) {
  this._family = family || (family = "Monaco, 'Courier New', Courier, monospace")
  this._size = parseInt(size, 10) || (size = 12)

  // Preparing container
  var line = document.createElement('div')
  var body = document.body
  line.style.position = 'absolute'
  line.style.whiteSpace = 'nowrap'
  line.style.font = size + 'px ' + family
  body.appendChild(line)

  // Now we can measure width and height of the letter
  var text = 'mmmmmmmmmm' // 10 symbols to be more accurate with width
  line.innerHTML = text
  this._width = line.offsetWidth / text.length
  this._height = line.offsetHeight

  // Now creating 1px sized item that will be aligned to baseline
  // to calculate baseline shift
  var span = document.createElement('span')
  span.style.display = 'inline-block'
  span.style.overflow = 'hidden'
  span.style.width = '1px'
  span.style.height = '1px'
  line.appendChild(span)

  // Baseline is important for positioning text on canvas
  this._baseline = span.offsetTop + span.offsetHeight
  document.body.removeChild(line)

  return {
    family: this._family,
    size: this._size,
    width: this._width,
    height: this._height,
    baseline: this._baseline
  }
}