动态加载字体

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态加载字体相关的知识,希望对你有一定的参考价值。

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

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

场景:

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

目前我正在使用AJAX来请求该字体文件

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

问题

我不知道浏览器何时正好呈现字体,所以我最终显示FOUT

答案

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

  },
});

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

另一答案

很遗憾,javascript不支持100%加载字体。但是有一项工作可以在将来支持它:

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

以上是关于动态加载字体的主要内容,如果未能解决你的问题,请参考以下文章

动态加载字体

页面加载后动态加载谷歌字体

Angular 2 动态字体加载

如何将Google网络字体动态加载到数组中? [关闭]

使用 Parceljs 动态加载图像

element Cascader 级联选择器动态加载实例