Улучшенные и четкие иконки пользовательского интерфейса с веб-шрифтами

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

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

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

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

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

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

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

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

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

@ Шрифт лицо {
семейство шрифтов: ‘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-регулярно-webfont.ttf’) (‘истинный тип’),
формат url (‘fonts / websymbols-регулярно-webfont.svg # WebSymbolsRegular’) (‘svg’);
}

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

• час
• я
• J
• я

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

.icon-font {
семейство шрифтов: WebSymbolsRegular;
размер шрифта: 12pt;
}

Рекомендуемое Чтение: Взгляд в: Лучшая Типография Для Современных Вебсайтов

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

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

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

ul.icon-font.pseudo li: before {
семейство шрифтов: WebSymbolsRegular;
поле справа: 5 пикселей;
}
ul.icon-font.pseudo li: nth-child (1): перед {
содержание: “ч”;
}
ul.icon-font.pseudo li: nth-child (2): before {
содержание: «я»;
}
ul.icon-font.pseudo li: nth-child (3): перед {
содержание: “j”;
}
ul.icon-font.pseudo li: nth-child (4): перед {
содержание: «А»;
}
ul.icon-font.pseudo li: nth-child (5): перед {
содержание: «Я»;
}

Рекомендуемое чтение: понимание псевдоэлемента: до и после

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

.icon-glass: before {content: ” f0c6″; }

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

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

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

Дальнейшее чтение: Кодировка символов в HTML

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

После того, как вы перейдете на эту страницу и добавите шрифт, выберите Expert. Вы увидите еще несколько вариантов; выберите Custom Subsetting.
В этом примере мы используем Социолико шрифт для отображения значков социальных сетей на нашем веб-сайте, но нам понадобятся только значки Dribble, Facebook и Twitter, которые соответственно представлены этими символами; д, ж и т. Итак, поместите эти символы в поле ввода «Одиночные символы» следующим образом:
И мы сделали. Теперь мы можем загрузить шрифт, и в моем случае размер шрифта оказался всего от 3Кб до 5Кб. Также помните, что единственными символами, которые будут отображаться в значке, являются только d, f и t, тогда как другие символы будут отображаться только как обычные буквы.

Дальнейшее чтение: Как оптимизировать веб-шрифты для экономии пропускной способности

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

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

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

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