Javascript Can'；本地加载字体时无法获得正确的宽度

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

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

我正在使用OpenSAN作为字体，并使用

link

tag从外部源加载它。通过这种设置，我得到了正确的消息气泡宽度，但是如果我尝试在本地加载字体，我会得到错误的宽度

外部加载：

$（“.message”）。每个（函数（）{
log（this，this.clientWidth）；
});
*{
保证金：0；
填充：0；
框大小：继承；
}
身体{
背景：gainsboro；
字体大小：13px；
字体系列：“开放式Sans”，无衬线；
框大小：边框框；
}
.留言{
背景：rgba（255255,5）；
利润率：10px；
填充：10px；
最大宽度：275px；
盒影：0 1px 1px rgba（0,0,0,2）；
线高：1.5；
显示：表格；
}

你好
你好，世界！
Lorem ipsum dolor sit amet
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
知识是一种美德，是一种美德，是一种美德，是一种美德。
知识是一种美德，是一种美德，是一种美德，是一种美德。但是，即使在外部加载字体时，也会发生这种情况。检查您的代码片段。第一次显示“Hello，World！”消息时显示为94px，但第二次单击时显示为98px（如果显示正确，请不要忘记清除缓存）

我在本地使用它，包括外部文件和本地文件，以及不同的JQuery版本。问题是函数在加载字体之前启动。要解决此问题，只需使用
窗口。onload
事件：


window.onload=function（）{
$（“.message”）。每个（函数（）{
log（this，this.clientWidth）；
});
};
*{
保证金：0；
填充：0；
框大小：继承；
}
身体{
背景：gainsboro；
字体大小：13px；
字体系列：“开放式Sans”，无衬线；
框大小：边框框；
}
.留言{
背景：rgba（255255,5）；
利润率：10px；
填充：10px；
最大宽度：275px；
盒影：0 1px 1px rgba（0,0,0,2）；
线高：1.5；
显示：表格；
}

你好
你好，世界！
Lorem ipsum dolor sit amet
洛雷姆·伊普苏姆·多洛·希特·阿梅特，康塞特图
知识是一种美德，是一种美德，是一种美德，是一种美德。
知识是一种美德，是一种美德，是一种美德，是一种美德。如果有任何人感兴趣，请联系ullamco Laboratoris nisi和aliquip ex ea commodo consequat.
：