js 计算元素的行高与字体大小，单位px

const getTagFontSize = (tag: string): number => {
  const ele = document.createElement(tag);
  document.body.append(ele);
  const { fontSize } = getComputedStyle(ele);

document.body.removeChild(ele);

  return parseInt(fontSize);
}

// 单位px
const getFontSizePx = (ele: any): number => {
  //   medium：于16px（h4预设值）
  // xx-small:medium的0.6倍（h6预设值）
  // x-small:medium的0.75倍
  //   small:medium的0.8倍（h5预设值，W3C定义为0.89，实测约为0.8）
  // large:medium的1.1倍（h3预设值，W3C定义为1.2，实测约为1.1）
  // x-large:medium的1.5倍（h2预设值）
  // xx-large:medium的2倍（h1预设值）
  // smaller：约为父层的80%
  // larger：约为父层的120%
  let ret = 0;
  const {fontSize} = getComputedStyle(ele);

  if (['xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large'].includes(fontSize)) {
    switch (fontSize) {
      case 'medium': ret = getTagFontSize('h4'); break;
      case 'xx-small': ret = getTagFontSize('h6'); break;
      case 'x-small': ret = getTagFontSize('h4') * 0.75; break;
      case 'small': ret = getTagFontSize('h5'); break;
      case 'large': ret = getTagFontSize('h3'); break;
      case 'x-large': ret = getTagFontSize('h2'); break;
      case 'xx-large': ret = getTagFontSize('h1'); break;
    }
  } else if (/^\d[\d]+(px)$/.test(fontSize)) {
    ret = parseInt(fontSize);
  } else if (/^\d[\d]+(em)$/.test(fontSize)) {
    const parentFontSize = getFontSizePx(ele.parentElement);
    ret = parentFontSize * parseInt(fontSize);
  } else if (/^\d[\d]+(rem)$/.test(fontSize)) {
    const rootFontSize = getComputedStyle(document.body.parentElement || document.body).fontSize;
    ret = parseInt(rootFontSize) * parseInt(fontSize);
  } else if (/^\d[\d]+(vh)$/.test(fontSize)) {
    ret = window.innerHeight;
  } else if (/^\d[\d]+(vw)$/.test(fontSize)) {
    ret = window.innerWidth;
  }  else if (/^\d[\d]+(%)$/.test(fontSize)) {
    const fs = getFontSizePx(ele);
    ret = fs * parseInt(fontSize) / 100;
  } else if (fontSize === 'inherit') {
    ret = getFontSizePx(ele.parentElement);
  } 

  return ret;
}

// 单位px
const getLineHeightPx = (ele: any): number => {
  // vh/vw/px/em/rem/normal/inherit/数值/百分比
  let ret = 0;
  const {lineHeight} = getComputedStyle(ele);
  if (/^\d[\d]+(px)$/.test(lineHeight)) {
    ret = parseInt(lineHeight);
  } else if (/^\d[\d]+(em)$/.test(lineHeight)) {
    const parentFontSize = getFontSizePx(ele.parentElement);
    ret = parentFontSize * parseInt(lineHeight);
  } else if (/^\d[\d]+(rem)$/.test(lineHeight)) {
    const rootFontSize = getComputedStyle(document.body.parentElement || document.body).fontSize;
    ret = parseInt(rootFontSize) * parseInt(lineHeight);
  } else if (/^\d[\d]+(vh)$/.test(lineHeight)) {
    ret = window.innerHeight;
  } else if (/^\d[\d]+(vw)$/.test(lineHeight)) {
      ret = window.innerWidth;
  }  else if (/^\d[\d]+(%)$/.test(lineHeight)) {
    const fontSize = getFontSizePx(ele);
    ret = fontSize * parseInt(lineHeight) / 100;
  } else if (/^\d[\d]+\d$/.test(lineHeight)) {
    const fontSize = getFontSizePx(ele);
    ret = fontSize * parseInt(lineHeight);
  } else if (lineHeight === 'normal') {
    const fontSize = getFontSizePx(ele);
    ret = 4/3 * fontSize;
  } else if (lineHeight === 'inherit') {
    ret = getLineHeightPx(ele.parentElement);
  }
  return ret;
}