Руководство по улучшению и улучшению значков пользовательского интерфейса с помощью веб-шрифтов

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

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

Значок растрового изображения также имеет недостатки в гибкости и масштабируемости; скажем, нам нужно увеличить или увеличить значок до определенного уровня или просмотреть его с очень высоким разрешением экрана, например на дисплее сетчатки; значок определенно выглядеть размытым.

Что ж, если принять во внимание некоторые из перечисленных выше вопросов, вам, вероятно, нужно использовать иконки шрифтов.

Использование значков шрифтов

шрифт значка представляет собой набор значков, упакованных в веб-шрифт, которые впоследствии можно встроить на веб-сайт с помощью @ Шрифт-лицо. Как отметил Крис из CSS-трюка, использование шрифта по сравнению с изображением дает множество преимуществ;

Шрифт - это векторный объект, который по своей природе не зависит от разрешения, поэтому значок останется четким при различном разрешении экрана, включая очень высокое разрешение экрана (например, уровень сетчатки)..
Он также масштабируем, что позволяет увеличивать его на многих уровнях без потери качества и точности..
Поскольку значок в основном шрифт, мы также можем контролировать цвет, прозрачность, тень текста и даже изменять его размер с помощью таблицы стилей
Мы также можем анимировать иконку с помощью CSS3.
Значок называется с @ Шрифт-лицо правило, которое было поддержано еще в Internet Explorer 4 (с .eot).
Малый HTTP-запрос и меньший размер файла.

Вот некоторые из лучших бесплатных значков шрифтов, которые мы можем найти:

Font Awesome
IcoMoon
Иконки социальных медиа
Zurb Foundation Иконы

Убедитесь, что вы проверили и выполнили условия лицензии, прежде чем встраивать ее на свой веб-сайт, чтобы почтить время автора и тяжелую работу..

@ font-face Rule

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

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-регулярно-webfont.eot'); Формат src: url ('fonts / websymbols -regular-webfont.eot? #iefix') ('embedded-opentype'), формат url ('fonts / websymbols-регулярно-webfont.woff') ('woff'), URL формат ('fonts / websymbols-normal-webfont.ttf') ('trueetype'), формат url ('fonts / websymbols -regular-webfont.svg # WebSymbolsRegular') ('svg');

Затем в HTML-документе нам нужно только добавить символы, представляющие значок, а не применять новый семейство шрифтов широко в документе, мы можем сделать это более конкретно, добавив дополнительный класс к определенным элементам, в которые должен отображаться значок, вот так;

  час
 я
 J
  я

Вернуться к таблице стилей, мы определяем новый семейство шрифтов для того класса, который мы только что добавили:

 .icon-font font-family: WebSymbolsRegular; размер шрифта: 12pt;

Демо @ font-face

Использование псевдоэлементов

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

  Ответить
 Повторить все
 Вперед
 прикрепление
 Образ

Мы можем сделать это таким образом в таблице стилей:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; поле справа: 5 пикселей;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";

Демо Псевдоэлемент

Unicode для частного использования

В некоторых случаях значки не были встроены в буквы (A, B, C, D и т. Д.), А были встроены в частное использование Unicode, чтобы минимизировать конфликты между символами. Как и в FontAwesome, автор, к счастью, добавил весь код символов в таблицу стилей, которая выглядит следующим образом;

 .значок-стекло: before content: "\ f0c6";

Но когда нам нужно встроить иконку прямо в HTML, что-то вроде следующего кода \ f0c6 не будет отображать заостренный значок, так как это недопустимый символ, закодированный в HTML.

HTML нуждается в числовой справочной разметке оказывать специальные символы. Мы немного об этом рассказали в нашем предыдущем уроке по кнопкам CSS3; к этому символу добавляется знак амперсанда (&), знак хеша (#) и Икс затем следует шестнадцатеричное число, которое представляет символ.

Например, f0c6 является шестнадцатеричным числом, поэтому цифровая ссылка на символ в HTML будет & # Xf0c6;, в FontAwesome этот код будет отображать значок скрепки, вот так;

Демо Юникод

Подстановка шрифтов

Иконки в коллекции могут быть не все нужны. В этом случае мы можем отбросить неиспользуемые символы путем подстановки шрифта, который также будет приводит к уменьшению размера шрифта. К счастью, от FontSquirrel есть удобный инструмент для выполнения этой работы, генератор @ font-face.

После перехода на эту страницу и добавления шрифта выберите эксперт. Вы увидите еще несколько вариантов; Выбрать Пользовательское Подмножество.

В этом примере мы используем шрифт Sociolico для отображения значков социальных сетей на нашем веб-сайте, но нам понадобятся только значки Dribble, Facebook и Twitter, которые соответственно представлены этими символами; д, ж а также T. Итак, поместите эти символы в поле ввода «Одиночные символы» следующим образом:

И мы сделали. Теперь мы можем загрузить шрифт, и в моем случае размер шрифта оказался всего от 3Кб до 5Кб. Также помните, что единственные персонажи, которые будет отображаться в иконке только d, f и t, в то время как другие символы будут отображаться как обычные буквы.

Последняя мысль

Одна вещь, которую мы не можем сделать в этой практике, это добавить очень детализированные эффекты, подобные этому, на иконку.

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

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

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

демонстрация
Скачать исходный код