Керівництво для кращих і чіткіших значків інтерфейсу користувача з веб-шрифтами

Якщо ви знайомі з використанням форматів растрових зображень (наприклад, PNG і GIF) для відображення піктограм на веб-сайті, то ви також знайомі з його недоліками. Перш за все, залежно від розміру та кількості інформації про колір, яку має значок, розмір файлу піктограми може бути дуже великим.

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

Піктограма Bitmap також має недоліки у гнучкості та масштабованості; скажімо, нам потрібно збільшити або збільшити піктограму до певного рівня, або переглянути її через дуже високу роздільну здатність екрана, наприклад, на дисплеї сітківки; піктограма визначено виявляються виглядають розмитими.

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

Використання значків шрифтів

An значок шрифту являє собою набір піктограм, упакованих у веб-шрифт, який згодом може бути вбудований на веб-сайті за допомогою @ font-face. Як зазначив Кріс у CSS-трюку, існує багато переваг використання шрифту над зображенням для доставки іконок;

Шрифт - це векторний об'єкт, який за своєю природою є незалежним від дозволу, тому значок залишатиметься чітким у різних дозволах екрану, включаючи дуже високий дозвіл екрана (наприклад, на рівні сітківки).
Він також масштабований, що дозволяє збільшувати його на багатьох рівнях без втрати якості та точності.
Так як значок в основному є шрифтом, ми також можемо контролювати колір, прозорість, текстові тіні і навіть змінювати його розмір через таблицю стилів
Ми також можемо анімувати іконку за допомогою CSS3.
Значок викликається з @ font-face правило, яке підтримується ще в Internet Explorer 4 (з .eot).
Менший HTTP-запит і нижній розмір файлу.

Ось деякі з найкращих безкоштовних шрифтів іконок, які можна знайти:

Шрифт Awesome
IcoMoon
Соціальні медіа іконок
Значки Фонду Zurb

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

@ font-face Правило

Як ми вже згадували, іконки вбудовані за допомогою @ font-face правила через таблицю стилів, які визначають нові сімейство шрифтів. У наступному прикладі ми будемо використовувати веб-символи;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); src: формат url ("fonts / websymbols-regular-webfont.eot? #iefix") формат ('embedded-opentype'), формат url ('fonts / websymbols-regular-webfont.woff') ('woff'), url ('fonts / websymbols-regular-webfont.ttf') формат ('truetype'), формат url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') ('svg');

Потім у документі HTML потрібно лише додати символи, які представляють піктограму, а не застосовувати нові сімейство шрифтів Широко в документі, ми можемо зробити більш конкретно, додавши додатковий клас до певних елементів, що іконка повинна бути перетворена в, як це;

  h
 i
 j
 A
 I

Назад до таблиці стилів, ми визначаємо нове сімейство шрифтів для цього класу, який ми щойно додали:

 .icon-font font-family: WebSymbolsRegular; розмір шрифту: 12pt;

Демо @ font-face

Використання псевдоелементів

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

  Відповісти
 Відповісти всім
 Вперед
 Додаток
 Зображення

Ми можемо зробити це таким чином у таблиці стилів:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): до content: "h";  ul.icon-font.pseudo li: nth-child (2): до content: "i";  ul.icon-font.pseudo li: nth-child (3): до content: "j";  ul.icon-font.pseudo li: nth-child (4): до content: "A";  ul.icon-font.pseudo li: nth-child (5): до content: "I";

Демо псевдоелемент

Приватне використання Unicode

Існує обставина, де ікони не були вбудовані в літери (A, B, C, D тощо), але були вбудовані в Unicode Private Use, щоб мінімізувати зіткнення між символами. Як і у FontAwesome, автор, на щастя, додав весь код символів у таблицю стилів, яка виглядає так;

 .icon-glass: до content: "\ t

Але коли нам потрібно вставляти іконку безпосередньо в HTML, то щось подібне до наступного коду f0c6 не відображатиме вказану піктограму, оскільки вона не є допустимим символом, закодованим у HTML.

HTML потребує чисельного розмітки для відображення спеціальних символів. Ми трохи розповіли про це в нашому попередньому підручнику з кнопок CSS3; цей символ має префікс із комбінацією знака амперсанда (&), хеш-знак (#) і an x потім піде шістнадцяткове число, яке представляє символ.

Наприклад, f0c6 - це шістнадцяткове число, тому числове посилання в HTML буде & # xf0c6;, у FontAwesome цей код відображатиме значок скріпки, так;

Демо Unicode

Шрифт

Іконки в колекції можуть бути не всі потрібні. У такому випадку ми можемо відкинути невикористані символи, підмноживши шрифт, який також буде призведе до зменшення розміру файлу шрифту. На щастя, у FontSquirrel є зручний інструмент, який легко виконує цю роботу, @ generator-font-face.

Після переходу на цю сторінку та додавання шрифту виберіть Експерт. Ви побачите додаткові параметри; виберіть Користувацька підмножина.

У цьому прикладі ми використовуємо шрифт Sociolico для відображення значків соціальних медіа на нашому сайті, але іконки, які нам знадобляться, - це тільки Dribble, Facebook і Twitter, які відповідно представлені цими символами; d, f і t. Отже, помістіть ці символи в поле введення окремих символів наступним чином:

І ми це зробили. Тепер можна завантажити шрифт, і в моєму випадку розмір шрифту виявився лише 3 Кб до 5 Кб. Також пам'ятайте, що тільки символи буде відображено в піктограму тільки d, f і t, інші символи відображатимуться лише для звичайного листа.

Заключна думка

Єдине, що ми не можемо зробити на цій практиці, це додати дуже деталізовані ефекти, як це, до піктограми.

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

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

Як зробити свій власний значок Webfont - WebDesignerDepot.com
Відображення шрифтів і атрибутів даних - 24Ways
Приватне використання Unicode - Вікіпедія

Демо
Завантажити джерело