Как я могу определить, когда веб-шрифт Google готов и отображается на странице? - PullRequest
Новая
       0

Как я могу определить, когда веб-шрифт Google готов и отображается на странице?

8 голосов
/ 26 марта 2012

Мне нужно вызвать действие, как только шрифты на моей странице переключатся на Google. (Я использую режим CSS) Произошло ли какое-либо событие DOM при переключении шрифтов?

Ответы [ 2 ]

5 голосов
/ 11 марта 2014

У Дэвида Уолша есть руководство по использованию API веб-шрифтов Google здесь: http://davidwalsh.name/google-fonts-api

Вот пример из его поста: 

WebFontConfig = {
    google: {
        families: [ 'Tangerine', 'Cantarell' ]
    },
    /* Called when all the specified web-font provider modules (google, typekit, and/or custom) have reported that they have started loading fonts. */
    loading: function() {
        // do something
    },
    /* Called when each requested web font has started loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
    fontloading: function(fontFamily, fontDescription) {
        // do something
    },
    /* Called when each requested web font has finished loading. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
    fontactive: function(fontFamily, fontDescription) {
        // do something
    },
    /* Called if a requested web font failed to load. The fontFamily parameter is the name of the font family, and fontDescription represents the style and weight of the font. */
    fontinactive: function(fontFamily, fontDescription) {
        // do something
    },
    /* Called when all of the web fonts have either finished loading or failed to load, as long as at least one loaded successfully. */
    active: function() {
        // do something
    },
    /* Called if the browser does not support web fonts or if none of the fonts could be loaded. */
    inactive: function() {
        // do something
    }
};

/* async! */
(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);
})();
4 голосов
/ 26 марта 2012

Не уверен, что это то, что вам нужно, но вы можете попробовать.Если вы используете WebFont Loader , возможно, вы можете его отслеживать.

WebFont Loader - это библиотека JavaScript, которая дает вам больший контроль над загрузкой шрифтов, чем API Google Web Fonts.,Загрузчик WebFont также позволяет использовать несколько поставщиков веб-шрифтов.Это было совместно разработано Google и Typekit.

Вы можете сделать это с помощью некоторых обратных вызовов, таких как loading(), active(), fontactive(fontFamily, fontDescription) и т. Д., Или путем проверки некоторых атрибутов класса.

Вот оно, надеюсь, это поможет вам.

...