Коли в останній раз ви використовували 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
де
Це дозволяє нам перемкнути шрифти як тільки вони завантажені - як у 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.
Ще немає коментарів