Пришвидшуємо завантаження сторінки з допомогою завантажувача шрифтів

4 хв. читання

Коли в останній раз ви використовували Arial, Times New Roman, Helvetica або Comic Sans на веб-сторінках? Зараз використовуються веб-шрифти. Вони (в багатьох випадках) безкоштовні і прості в реалізації:

    @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);

Потім ви можете використовувати шрифт для всієї сторінки, наприклад.

    body {
        font-family: Ubunutu, sans-serif;
        font-weight: 400;
    }

Після зображень, шрифти, як правило, займають друге місце по об'єму даних на вашій web-сторінці. Ubuntu font вище додає майже 250Kb ваги до сторінки, що особливо помітно при повільних підключеннях, наприклад, при використанні мобільного інтернету. Chrome, IE, Safari і Opera, залишають порожній простір при завантаженні шрифтів, тож сторінка знаходиться в непридатному для використання стані. Firefox і старі версії Opera показують "запасний" шрифт, а потім перемикаються (FOUT). Жоден з варіантів не є ідеальним рішенням проблеми.

JavaScript webfontloader

На щастя, є й інший варіант: webfontloader. Це бібліотека JavaScript, можете завантажувати шрифти з Google, Typekit, Fonts.com, Fontdeck або з власного сервер у фоновому режимі, коли сторінка завантажена. Сама бібліотека додає ще 17Kb до сторінки, але вона також завантажується у вигляді фонового процесу.

Щоб завантажити набір шрифтів Ubuntu вище, ми створюємо глобальний об'єкт з ім'ям WebFontConfig, який визначає наші шрифти і налаштування, а потім завантажуємо webfontloader:

    var WebFontConfig = {
        google: {
            families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
        },
        timeout: 2000
    };
     
    (function(){
        var wf = document.createElement("script");
        wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
            '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
        wf.async = 'true';
        document.head.appendChild(wf);
    })();

Таким чином, ми можемо визначити як завантажувати шрифти в залежності від пристрою і пропускної здатністі. В ідеалі, ми могли б використовувати Network Information API, але підтримка браузерів залишається обмеженою. Крім того, зверніть увагу на параметр timeout в WebFontConfig; якщо файли шрифтів вимагають більше двох секунд для завантаження, запит буде перервано.

Зворотні виклики з CSS

У webfontloader застосовуються імена класів для html-елемента в процесі експлуатації:

  • .wf-loading \- запит на всі шрифти

  • .wf-active \- всі шрифти доступні

  • .wf-inactive \- жоден з шрифтів не може бути завантажений

Класи також можуть бути застосовані для окремих шрифтів:

  • .wf---loading \- один шрифт був запитаний

  • .wf---active \- один шрифт доступний

  • .wf----inactive \- шрифт не може бути завантажений

де \- це урізана версія назву шрифту і є варіацією опису, наприклад, i4 для 400 weight italic.

Це дозволяє нам перемкнути шрифти як тільки вони завантажені - як у Firefox, наприклад.

    /* default OS fonts */
    body {
        font-family: arial, sans-serif;
    }
     
    /* fonts now loaded */
    .wf-active body {
        font-family: 'Ubuntu';
    }

Зворотні виклики з JavaScript

Схожі JavaScript функції можуть бути визначені в WebFontConfig хоча є менше ситуацій, де це корисно, наприклад.

    var WebFontConfig = {
        google: {
            families: [ 'Ubuntu:400,300,400italic,300italic,500italic,500,700,700italic:latin' ]
        },
        timeout: 2000,
        loading: function() {},
        active: function() {},
        inactive: function() {},
        fontloading: function(familyName, fvd) {},
        fontactive: function(familyName, fvd) {},
        fontinactive: function(familyName, fvd) {}
    };

Для більш детальної інформації ознайомтесь з оф. документацією webfontloader.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 5.8K
Приєднався: 8 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація