css-svg实现小于12号字体

效果

千山鸟飞绝 - from hill to hill no bird in flight

html

<section class="s12-wrap">
  <p style="font-size: 12px; margin: 0;padding-right: 10px;">
    千山鸟飞绝 - from hill to hill no bird in flight
  </p>
  <svg id="size-svg" width="205.515625" height="14">
    <text
        id="size-text"
        dominant-baseline="baseline"
        font-size="12"
        y="12"
        style="line-height: 1; vertical-align: middle;"
    >
      千山鸟飞绝 - from hill to hill no bird in flight
    </text>
  </svg>
</section>

js

  const svg = document.getElementById('size-svg');
  const sText = document.getElementById('size-text');
  const inp = document.getElementById('s12-inp');
  let size = 12;
  const fontsizeHeightMap = {
    1: 1.22,
    2: 2.52,
    3: 3.63,
    4: 5.02,
    5: 6.03,
    6: 7.52,
    7: 8.52,
    8: 9.14,
    9: 10.52,
    10: 11.52,
    11: 13.02,
    12: 14
  };

  const changeAttr = size => {
    const value = fontsizeHeightMap[size];
    svg.setAttribute('height', value);
    if (size < 3) {
      sText.setAttribute('y', value)
    } else if (size === 3) {
      sText.setAttribute('y', (value - 1).toFixed(2))
    } else {
      sText.setAttribute('y', (value - 2).toFixed(2))
    }
    sText.setAttribute('font-size', size)
    inp.value = size;
  }

  inp.addEventListener('change', e => {
    const num = e.target.value * 1
    console.log(num);
    if (num > 12) size = 12;
    else if (num < 0) size = 1;
    else size = num
    changeAttr(size);
  })

Tip
使用 svg 作为解决小于 12px 字号文字的方案：
使用 transform: scale() 设置后占位区域并没有改变，难以调节对齐方式。
使用 canvas 无法选中文字（也可以解决，但不如 svg 简洁）