Font Metrics

by hikerpig

HTML

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8" />

    <link href="https://fonts.googleapis.com/css?family=Kosugi+Maru|Noto+Sans+JP|Roboto" rel="stylesheet">
  </head>
  <body>
    <content>
      <div class="f-30">
        <span class="zh-1">字</span>
        <span class="zh-2">字</span>
      </div>
      <div class="f-30">
        <dl class="zh-1">
          <dt>字</dt>
          <dd>Noto Sans JP</dd>
        </dl>
        <dl class="zh-2">
          <dt>字</dt>
          <dd>Kosugi Maru</dd>
        </dl>
      </div>
    </content>
    <script src="./index.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

CSS

span {
  background-color: pink;
}

.zh-1 {
  font-family: Noto Sans JP;
}

.zh-2 {
  font-family: Kosugi Maru;
}

.en {
  font-family: Roboto;
}

.f-30 {
  font-size: 30px;
}

dd,
dt {
  display: inline-block;
}

JavaScript

function getMetricsByCanvas(canvas, str, font) {
  const ctx = canvas.getContext('2d')

  ctx.font = font

  console.log(str, font, ctx.measureText(str))
}


function getMetricsBySpan(str, font) {
  var d = document.createElement("span");
  d.style.font = font;
  d.textContent = str;
  document.body.appendChild(d);
  const emHeight = d.offsetHeight;
  const emWidth = d.offsetWidth;

  console.log(str, font, { emWidth, emHeight })

  document.body.removeChild(d);
}

window.onload = function() {

  const canvas = document.createElement('canvas')
  document.body.appendChild(canvas)
  window.canvas = canvas

  getMetricsByCanvas(canvas, '字', '30px  Noto Sans JP')
  getMetricsByCanvas(canvas, 'm', '30px  Noto Sans JP')

  getMetricsBySpan('字', '30px  Noto Sans JP')
}