gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:54:23 25 4
gpt4 key购买 nike

我正在做一个元素,我尝试使用大约 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..\n\rTrying to load site anyway.."); mutexFontsLoaded.fire(); }
};

随后是 Web 字体加载器库 - 1.5.1

然后在我的主脚本中:

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

最佳答案

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

Webfont.js 注入(inject)一个 <span>将测试字符串放入 <body> DOM 元素。然后它在此跨度上设置自定义字体并重复计算 <span> 的宽度测试任何更改。如果它捕获到更改,则它假定自定义字体已加载。如果在超时内未检测到任何更改,则表示失败。

以我为例 <body>元素被 display: none; 隐藏了因为我只想在知道所有元素都已下载后显示该页面。因此注入(inject)了<span>从未改变其计算宽度。

终于修好了!

关于css - 使用 webfont.js 加载自定义字体,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22004447/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com