javascript - 浏览器 : Is it possible to to reload font without refreshing page?

Question

考虑一个在 Canvas 上渲染内容的应用程序。有以下场景: 用户加载应用程序并使用它一段时间。他转到一些不同的 View 或更改使用的字体，但由于没有连接问题或超时，无法加载字体。一段时间后连接恢复，我们可以为用户加载字体。

是否可以重新加载字体？我尝试再次注入(inject) font-face CSS 并等待加载字体(使用 FontFaceObserver )但浏览器会记住字体加载失败时的状态。

还有一个要求:用户可以从多种字体(大约 100 种)中进行选择，所以我不想在初始化时加载所有字体 - 字体应该按需加载。

Answer 1

我认为您的问题可以使用 Google 的 Web 字体加载器库来解决，下面是供引用的链接:https://github.com/typekit/webfontloader 使用步骤:

• 将JS文件包含到库中
• 在 JS 加载器中添加以下代码块:

WebFont.load({
    google: {
        families: ['Droid Sans']
    },
    timeout:5000,
    fontactive: function(familyName,fvd){ 
        //This is called once font has been rendered in rowser
        //Your business logic goes here
    },
});