使用 webfont.js 加载自定义字体

我正在做一个项目，我正在尝试使用大约 5 种自定义字体。

我使用webfont.js库，这样我就可以按照我想要的方式对初始化进行计时。

但是，我

注意到我有一个间歇性问题，即 webfont.js 在 75% 的时间内加载所有 5 种字体都无法加载。如果我忽略错误（非活动处理程序）并继续加载我的网站，我可以看到所有自定义字体都很好。

这很烦人，因为 webfont.js 大约需要 4 秒来引发非活动事件，因此用户在发生这种情况时只会看到空白页。

如何修复（或至少调试）此问题？

这是我的设置（util.js）：

var mutexFontsLoaded = $.Callbacks("memory once");
WebFontConfig = {
  custom: {
    families: ['Chennai-Regular', 'Chennai-Light', 'Chennai-Bold', 'Quicksand-Bold', 'Segoe-Print'],
    urls: ['css/fonts.css']
  },
  loading: function () { console.log("Loading fonts.."); },
  active: function () { mutexFontsLoaded.fire(); },
  fontinactive: function (font, fvd) { console.log("Could'nt load " + font + " font"); },
  inactive: function () { console.log("All fonts failed loading..nrTrying to load site anyway.."); mutexFontsLoaded.fire(); }
};

其次是 Web 字体加载器库 - 1.5.1

然后在我的主脚本中：

$(document).ready(function () {
    mutexFontsLoaded.add(function()
    {
        application.init();
    });
});

调试谷歌 CDN 中的 webfont.js 库让我看到了这个问题。

Webfont.js将带有测试字符串的<span>注入到<body> DOM元素中。然后，它在此范围上设置自定义字体，并重复计算<span>的宽度以测试是否有任何更改。如果它捕获了更改，则假定自定义字体已加载。如果在超时内未检测到更改，则表示失败。

就我而言<body>元素被display: none;隐藏，因为我只想在我知道所有元素都已下载后显示页面。因此，注入的<span>从未改变其计算宽度。

终于修好了！

相关内容

最新更新

热门标签：