CSS3. Завантаження векторних значків через @font-face: за і проти

За допомогою @font-face{} ви можете завантажувати значки (іконки) не у вигляді PNG або GIF, а впровадити всередину шрифту і довантажити користувачеві через директиву @font-face. CSS3 дозволяє повертати такі значки, додавати тіні або навіть анімовані ефекти з плавною зміною кольору при наведенні курсору миші (раніше таке було можливе тільки на Flash).

Ось тут інструкція з використання набору шрифтів IconPack (.eot, .woff, .ttf, SVG) і завантаження значків за допомогою псевдо-елемента: :before та тега span.

<style>  

.staricon {  

  font-family: 'IconPack';  

}  

.staricon:before {  

  content: 'a';  

}  

.show {  

  display:block;  

}  

.hide {  

  display:none;  

}  

</style>    

<div class="staricon">  

  <span class="show">star</span>

</div>

Якщо подумати, у такого методу є маса переваг і його можна рекомендувати як усталений спосіб зображення значків на сторінці, незважаючи на наявні недоліки.

Переваги

Потенційно набагато менше HTTP-запитів,

Викачування сотні маленьких картинок може займати набагато більше часу, ніж одного великого файлу. У деяких випадках, це може призвести до більш швидкого завантаження сторінки (для цього використовуються іконостос).

Один значок, нескінченні розміри

Векторні значки означають дозволяють масштабування без втрат якості зображення. Забудьте про icon_8x8.png, icon_16x16.png, icon_24x24.png і т.д.

Більш точна система керівництвом значків

Керівництво значками, де в кожному є купа варіантів різних розмірів і кольорів, може стати серйозним головним болем. Зі шрифтами всі кольори/розміри знаходяться в одному файлі.

Заміна значків одним рядком CSS

Всі розмови про Typekit і про те, як легко вбудовувати шрифти, в майбутньому можуть точно так само перейти на значки.

Спецефекти на CSS3

Вищезазначені анімовані ефекти, плавна зміна кольору з наведення миші та інші ефекти можуть стати цікавим прийомом веб-дизайну.

Недоліки

Шрифти можуть бути великими

Складний шрифт легко може переважити за 90 КБ. Важко виправдати такий розмір, якщо вам потрібен один якийсь особливий значок.

Немає стандартів

Якщо припустити, що TypeKit повинен розробляти і продавати набори значків, як зараз вони пропонують вбудовані шрифти, то тоді потрібно зробити стандартний набір символів для іконок в наборі, а також присвоїти кожному значку стійкий порядковий номер. В іншому випадку, ми не зможемо легко міняти один набір значків на інший, як зараз робимо зі шрифтами.

Ризик зіпсувати дизайн

Експерименти зі значками з шрифтів показують, як легко запороти дизайн, якщо неправильно використовувати цю техніку.

Різнобарвні значки не працюють

Якщо ви хочете впровадити різнокольорові значки (наприклад, прапори країн), то вас чекає розчарування: CSS3 дозволяє використовувати тільки прості градієнти, але більше нічого.

Підтримка не всіма браузерами

Якщо браузер користувача примусово забороняє завантаження шрифтів і використовує тільки вбудовані шрифти, то ніяких значків він взагалі не побачить.

Оригінал статті