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

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

即使在外部加载字体时也会发生这种情况。检查你的sn-p。第一次显示 94px 表示“Hello, World!”消息，但第二次点击时为 98px（如果显示正确，请不要忘记清除缓存）。

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

window.onload = function() {
  $(".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;
}

<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>

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