javascript - 首页加载时从 div 检索到的尺寸错误

Question

我正在使用 Robotto Monospace 字体，我需要计算它的单个字符宽度。所以我这样做

var singleCharacterWidth;

function calculateCharactersWidth() {
  var x = $('<div>').text('A').appendTo('#hiddenView');
  singleCharacterWidth = x.width();
  $('#hiddenView').empty();
}

$(document).ready(function() {
  calculateCharactersWidth();
  
  console.log(singleCharacterWidth);
});

#hiddenView {
  float: left;
  font-family: 'RobotoMono-Regular';
  font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<div id="hiddenView"></div>

当页面第一次加载时，它给出了错误的宽度，重新加载页面后，它给出了正确的宽度。

第一次页面加载calculateCharactersWidth()给出9。重新加载时，它会给出正确的字符宽度，即 7.20

这有什么问题吗？

控制台屏幕截图

当我使用默认等宽字体时，不会发生这种情况。它总是返回相同的宽度。
那么这可能与加载自定义字体有关..

Answer 1

这篇文章可能重复: jQuery width() incorrect immediately after document ready?

这个想法是将函数调用移动到 $(window).load() 事件而不是文档就绪!

多次解决了我的问题，希望对你有帮助