Блог

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

Кто-нибудь знает какие-либо инструменты, которые будут сканировать весь сайт и создавать электронную таблицу или что-то в этом роде из всех используемых шрифтов/стилей? Мы могли бы попробовать создать что-то на PHP, если нет, может быть, с помощью domdocument, есть какие-нибудь идеи по этому поводу?

Заранее спасибо за любую помощь/подсказки!

Филипп

Похоже, для этого нам придется сделать какой-то JavaScript. Для всех остальных мы используем приведенное ниже, которое мы отправим через AJAX для нашей PHP-системы.

 if ( typeof getComputedStyle == "undefined" ) {
    getComputedStyle = function( elem ) { return elem.currentStyle; }
}

var who, nodes = document.body.getElementsByTagName('*'), font_styles = {};
for ( var i=0; i < nodes.length; i   ) {    
    who = nodes[i];
    if ( who.style ) {
        fontFamily = getComputedStyle(who, '')['fontFamily'];
        fontWeight = getComputedStyle(who, '')['fontWeight'];
        fontStyle = getComputedStyle(who, '')['fontStyle'];
        key = fontFamily   fontWeight   fontStyle;
        font_styles[key] = { fontFamily, fontWeight, fontStyle }
    }
}
console.log( font_styles );