Как мне проверить загрузку внешнего шрифта

#javascript #html

#javascript #HTML

Вопрос:

У меня очень странная проблема, и я даже не уверен, правильный ли это угол, но вот начинается настройка:

ссылка на шрифт Google в заголовке;

onload: function x() чтобы отобразить шрифт на холсте;

 onclick: x();
  

поскольку onload рендеринг текста стандартным шрифтом и onclick выполнение одной и той же функции работают идеально, я думаю, что шрифт не полностью загружен при первом выполнении.
поэтому мне было интересно, есть ли способ проверить ход загрузки внешнего шрифта.

Ответ №1:

Вы смотрели на Google Fonts API, в частности на раздел «Действие в зависимости от событий»?

Ответ №2:

 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);
      })();