在本地加载字体时无法获得正确的宽度

Question

我刚开始创建一个小工具来预览（通过电子邮件发送）WhatsApp聊天记录。如果您注意到，消息气泡的时间戳位置会根据消息的长度而变化。

要获得正确的定位，首先，我需要获得消息（文本）的精确长度/宽度（以像素为单位）。我有一个自定义功能，它工作正常。

我正在使用Open Sans作为字体，并使用link标记从外部源加载它。使用此设置，我得到消息气泡的正确宽度，但如果我尝试在本地加载字体，则会得到不正确的宽度。

外部加载：

$(".message").each(function () {
    console.log(this, this.clientWidth);
});

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
body {
    background: gainsboro;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}
.message {
    background: rgba(255,255,255,.5);
    margin: 10px;
    padding: 10px;
    max-width: 275px;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    line-height: 1.5;
    display: table;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

<div class="message">Hi!</div>
<div class="message">Hello, World!</div>
<div class="message">Lorem ipsum dolor sit amet</div>
<div class="message">Lorem ipsum dolor sit amet, consectetur</div>
<div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

在当地加载：

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url("OpenSans-Regular.ttf") format('truetype');
}

结果：

我尝试以不同的格式加载字体（woff2等），但仍然遇到了同样的问题。一旦我触底，我尝试用超时记录宽度，并且它有效。

$(".message").each(function () {
    console.log(this, this.clientWidth);
});

console.log("with timeout:");

setTimeout(function () {
    $(".message").each(function () {
        console.log(this, this.clientWidth);
    });
}, 100);

为什么会这样？我必须使用超时来获得正确的宽度吗？如何在外部加载字体时不会出现问题？

_{这可能是Chrome特有的问题。我尝试使用FireFox并获得了正确的宽度，但是值不同（96px），但我认为这是因为它们以不同的方式渲染字体。}

Answer 1

即使外部加载字体也会出现这种情况。检查您的代码段。第一次显示94px的“Hello，World！”消息，但是第二次点击它是98px（如果正确显示，请不要忘记清除缓存）。

我在本地使用外部和本地文件，不同的JQuery版本。问题是函数在加载字体之前触发。要解决的只是使用window.onload事件：

＆＃13;

＆＃13;

window.onload = function() {
  $(".message").each(function () {
   console.log(this, this.clientWidth);
  });
};

＆＃13;

* {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}
body {
    background: gainsboro;
    font-size: 13px;
    font-family: 'Open Sans', sans-serif;
    box-sizing: border-box;
}
.message {
    background: rgba(255,255,255,.5);
    margin: 10px;
    padding: 10px;
    max-width: 275px;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    line-height: 1.5;
    display: table;
}

＆＃13;

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="message">Hi!</div>
<div class="message">Hello, World!</div>
<div class="message">Lorem ipsum dolor sit amet</div>
<div class="message">Lorem ipsum dolor sit amet, consectetur</div>
<div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>

＆＃13;

＆＃13;

＆＃13;

顺便说一句，我无法在Firefox中重现96px，只能通过元素选择器重现94px，98px和97.7667px，不知道为什么你有96px。