不同浏览器的文字宽度不同

Question

出于某种原因，我需要获取文本的宽度。当我使用offsetWidth，clientWidth或getBoundingClientRect时，在跨不同浏览器（主要是在Edge中）计算文本宽度时，确实存在差异。

我尝试了以下操作： demo

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
body {
	line-height: 1;
}

h1 {
  display: inline-block;
  font-size: 38px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

<h1>Welk woord is onderstreept?</h1>
<script>
  var h1 = document.getElementsByTagName("h1")[0];
  document.write(h1.offsetWidth);
</script>

我使用哪种字体都没有关系。有谁知道适当的解决方案，使每个浏览器中的文本宽度相同？