如何检查外部字体的加载

How do i check the load of an external font

本文关键字：外部 字体 加载 检查 何检查      更新时间：2023-09-26

我有一个非常奇怪的问题，我甚至不确定它是否是直角，但设置如下：

头部的谷歌字体链接；

onload: function x()以在画布中呈现字体；

onclick: x();

由于onload以标准字体呈现文本，而onclick执行同一函数时效果很好，我认为第一次执行时字体没有完全加载。所以我想知道是否有一种方法可以检查外部字体的加载进度。

您看过Google Fonts API，特别是"对事件采取行动"部分吗？

WebFontConfig = {
  google: {
    families: [ 'Tangerine', 'Cantarell' ]
  },
  typekit: {
    id: 'myKitId'
  },
  loading: function() {
    // do something
  },
  fontloading: function(fontFamily, fontDescription) {
    // do something
  },
  fontactive: function(fontFamily, fontDescription) {
    // do something
  },
  fontinactive: function(fontFamily, fontDescription) {
    // do something
  },
  active: function() {
    // do something
  },
  inactive: function() {
    // do something
  }
};
(function() {
        var wf = document.createElement('script');
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.type = 'text/javascript';
        wf.async = 'true';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(wf, s);
      })();
相关文章：