先看效果：

思路：使用canvas.measureText计算单个字符宽度，使用定时器根据每个字符宽度动态设置元素宽度

实现代码如下：

<div>
  <h1 id="typewriter"></h1>
</div>

<script>
function getTextWidth(text, font = 'bold 36px Consolas, Monaco, monospace') {
  const canvas = document.createElement('canvas');
  const context = canvas.getContext('2d');
  context.font = font; // 设置字体样式
  return context.measureText(text).width;
}

function calcTextWidth(text) {
  const lenArr = []
  for(let i = 0; i < text.length; i++) {
    lenArr.push(getTextWidth(text[i]))
  }
  return lenArr
}
const textStr = 'this is a 中英文测试 paragraph'
const lenArr = calcTextWidth(textStr)
const lenNum = lenArr.reduce((r, v) => r += v, 0)

const typeWriter = document.getElementById('typewriter');
typeWriter.style.width = lenNum + 'px'
typeWriter.innerText = textStr

let idx = 1;
function stepWidth() {
  if (idx <= lenArr.length) {
    typeWriter.style.width = lenArr.slice(0, idx).reduce((r, v) => r += v, 0) + 'px'
    console.log(idx)
    setTimeout(() => {
      idx ++ 
      stepWidth()
    }, 100)
  }
}

stepWidth()

</script>

<style>
h1 {
	font: bold 36px Consolas, Monaco, monospace;
	border-right: 0.1em solid;
	margin: 2em 1em;
	white-space: nowrap;
	overflow: hidden;
	animation: cursor-blink 0.3s step-end infinite alternate;
}

@keyframes typing {
	from {
		width: 0;
	}
}

@keyframes cursor-blink {
	50% {
		border-color: transparent;
	}
}
</style>