如何确保在执行 JS 之前应用自定义字体答案

【问题标题】：How to ensure that custom fonts are applied before executing JS如何确保在执行 JS 之前应用自定义字体
【发布时间】：2016-02-08 06:02:31
【问题描述】：

当我的页面加载时，我执行 JS 来确定某些文本是否适合其父 div。如果没有，那么需要做一些事情。

文本使用自定义字体，通过 @font-face 或 Google 字体加载，具体取决于字体。

问题是 JS 有时会在字体应用之前运行，导致错误的结果，因为字体的大小/宽度不完全相同。

编辑，回应 cmets：

我在标题中有 CSS，在文档末尾有 JS。我现在已经把我所有的代码都放进去了：

$(document).ready ( function(){...})

问题仍然存在。

当我关闭缓存时，它会测量错误的高度。当缓存打开时，它会获得正确的高度，大概是因为应用字体的时间。

【问题讨论】：

【解决方案1】：

我最终编写了比较两个元素宽度的 JS 代码：一个使用 websafe 字体，一个使用该字体，其备用字体是相同的 websafe 字体。

元素以相同的宽度开始，然后在呈现 Google 字体时变得不同。代码循环，然后在字体渲染完成后退出并运行其余代码。

对于这个网页，window.onload 的问题在于它还等待所有图像加载，我不希望我的 js 等待。

【讨论】：

【解决方案2】：

试试

$(window).load(function(){
    //your code here...
});

【讨论】：