在正确的时间加载缓存的字体

loading cached fonts at the right time

本文关键字：缓存 字体 加载 时间      更新时间：2023-09-26

我有一些通过Webfontloader加载的Web字体，如下所示。。。

<script src="//ajax.googleapis.com/ajax/libs/webfont/1.5.10/webfont.js"></script>
<script>
    WebFont.load({
        custom: {
            families: ['BlenderProBook', 'BlenderProMedium']
        }
    });
</script>

第一次加载页面时效果很好。。。问题是，当刷新页面时，它只会在html中请求时检索缓存的字体，而不是在我的ReactJS应用程序运行之前（当Webfontloader正常获取它们时）。这对我来说太晚了，因为我正在预生成的SVG中使用它们。

有没有办法强迫它每次都获得未缓存的字体？或者更好的是，在正确的时间加载缓存的字体。

我找到了一个解决方案，如果没有其他人能提供更好的解决方案，我会把它作为我的答案。

我的字体在应用程序中被广泛用于计算文本宽度，因此布局。。。（这就是为什么它需要在应用程序运行之前加载），所以我决定使用文本宽度代码作为测试来阻止应用程序运行。

这是代码

var testFont = require('./components/svgText.js');
var timer = setInterval(function () {
    var test = (testFont('TEST', 'BlenderProBook', 20).width === 39.75);
    if (test) {
        clearInterval(timer);
        Router.run(routes, function (Handler) {
            React.render(<Handler/>, document.body);
        });
    }
}, 50);

其中svgTest.js使用Raphael SVG生成SVG文本并检索测量值，如下所示：-

renderedTextSize = function (string, font, fontSize) {
    var paper = Raphael(0, 0, 0, 0);
    paper.canvas.style.visibility = 'hidden';
    var el = paper.text(0, 0, string);
    el.attr('font-family', font);
    el.attr('font-size', fontSize);
    var bBox = el.getBBox();
    paper.remove();
    return {
        width: bBox.width,
        height: bBox.height
    };
};
module.exports = renderedTextSize;

这似乎运行得很好，尽管在测试一个神奇的数字（宽度）时感觉有点麻烦。

相关文章：