Question

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

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

情境：

用户将从option标记中选择字体<select>。点击后，我必须动态检索字体并通过浏览器确保字体呈现，然后使用字体避免使用无格式文本Flash（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

  },
});

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

Answer 2

不幸的是，JavaScript不支持100％加载字体。但是有一项工作可以在将来支持它：

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

Answer 3

您现在可以使用Font Loading API检测何时已加载所有字体。在大多数现代浏览器中都可以使用。

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

动态加载字体

3 个答案: