动态加载字体

Question

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

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

场景：

用户将从 <select> 标签中 select 字体 option。单击后，我必须动态检索字体并确保字体由浏览器呈现，然后使用该字体避免无样式文本的闪现（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

不幸的是，JavaScript 不支持 100% 加载字体。但是有一个关于这个的工作在未来支持它：

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

Answer 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

  },
});

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

Answer 3

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

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

Answer 4

您可以使用本机 Font Loading API，不再需要第 3 方包。这是一个工作示例：

document.getElementsByTagName('button')[0].onclick = async function() {

  const myFont = new FontFace('Pacifico', 'url(https://fonts.gstatic.com/s/pacifico/v21/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)');
  await myFont.load();
  document.fonts.add(myFont);

  document.getElementsByTagName('h1')[0].style.fontFamily = "Pacifico";
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <h1>Hello world!</h1>
  <button>Dynamically load font</button>
</body>

</html>

动态加载字体

Dynamically Load fonts

html

javascript

css

fonts

webfont-loader