动态加载字体答案

【问题标题】：Dynamically Load fonts动态加载字体
【发布时间】：2017-06-10 16:37:17
【问题描述】：

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

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

场景：

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

目前我正在使用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

【问题讨论】：

usefulangle.com/post/74/javascript-dynamic-font-loading

标签： javascript html css fonts webfont-loader

【解决方案1】：

很遗憾，JavaScript 不支持 100% 加载字体。但是将来有一项工作可以支持它：

https://developer.mozilla.org/en-US/docs/Web/API/CSS_Font_Loading_API https://drafts.csswg.org/css-font-loading/

【讨论】：

【解决方案2】：

可能有点晚了，但我使用 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

  },
});

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

【讨论】：

【解决方案3】：

您现在可以使用Font Loading API 来检测所有字体的加载时间。这应该适用于大多数现代浏览器。

// Wait until all fonts are loaded:
document.fonts.ready.then(() => init());

【讨论】：