javascript - 动态加载字体

Question

我的元素需要大约 150 种字体。最初加载所有字体会增加页面加载时间。

我试过谷歌搜索但找不到答案。

场景:

用户将选择一种字体 option来自 <select>标签。单击后，我必须动态检索字体并确保字体由浏览器呈现，然后使用该字体避免无样式文本 (FOUT) 的闪烁

目前我正在使用 AJAX请求那个字体文件

      $.ajax({
      type: 'GET',
        url: "font-file-url",
        async:false,
        success: function(data) {
            $("style").prepend("@font-face {\n" +
            "\tfont-family: \""+fontValue+"\";\n" + 
            "\tsrc: local('☺'), url("font-file-url") format('opentype');\n" + 
            "}");
         }
      });

问题

我不知道浏览器什么时候渲染字体，所以我最终显示了FOUT

Answer 1

可能有点晚了，但我使用 Google 的 WebfontLoader Library 完成了它.它为我完成了工作。

我是这样实现的:

第 1 步:包含库的JS文件

第 2 步:下面的代码对我有用

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

  },
});

除谷歌字体外，您还可以加载自定义字体。库还提供了各种回调函数和其他很酷的东西。您可以查看上面的链接。