监听第三方字体加载完成事件

2022-01-17  本文已影响0人  IssunRadiance

方法一:

document.fonts.ready
document.fonts.ready.then(function() {
     that.fontLoading = false
}).catch(() => {
     hat.fontLoading = false
})
备注:但是这种方法不兼容IE等浏览器,在谷歌上是可以的

方法二:(神器)

FontFaceObserver

1.npm安装

npm install fontfaceobserver

2.引入

import FontFaceObserver from "fontfaceobserver";

3.使用

var font = new FontFaceObserver(family); // family 自定义的字体名称
font.load(null, 20000).then(() => {
  that.fontLoading = false
}, function () {
  that.fontLoading = false
});
具体的用法和相关配置(https://www.npmjs.com/package/fontfaceobserver)
上一篇下一篇

猜你喜欢

热点阅读