Иконочные шрифты: как они работают?

87

Я понимаю, что шрифты значков - это просто шрифты, и вы можете получить значки, просто назвав их имя класса, но как работают шрифты значков?

Я попытался проверить связанные ресурсы шрифтов значков, загруженные в Chrome, чтобы увидеть, как шрифты значков отображают значки (по сравнению с обычными шрифтами), но я не смог понять, как это происходит.

Мне также не удалось найти ресурсы о том, как используется эта «техника шрифтов значков», хотя доступно множество шрифтов значков . Есть также множество ресурсов, показывающих, как можно интегрировать шрифты значков , но, похоже, никто не делится или не пишет о том, как это делается!

css web fonts icons icon-fonts Вивек Чандра
источник

Ответы:

53

Глификоны - это изображения, а не шрифт. Все значки находятся в изображении спрайта (также доступны как отдельные изображения), и они добавляются к элементам как расположенные backround-images:

Глификоны

Фактические иконки шрифтов ( FontAwesome , например) действительно вовлечь загрузки конкретного шрифта и использовать грим в contentсобственности, например:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Поскольку это contentсвойство не поддерживается в старых браузерах, они также используют изображения .

Вот пример полностью необработанного FontAwesome, используемого в качестве шрифта, превращающего ( - возможно, вы этого не увидите!) В машину скорой помощи: http://jsfiddle.net/GWqcF/2

Джеймс Доннелли
источник
4
Иконки FontAwesome - это шрифты. Я даже упомянул FontAwesome в своем ответе и рассказал, как они обрабатывают браузеры, которые не поддерживают их метод CSS для добавления значков на страницу.
Джеймс Доннелли
3
Иконки - это символы шрифта. В качестве грубого примера: букву «Z» можно оформить в виде чемодана, сохранить как шрифт и затем использовать на веб-сайте.
Джеймс Доннелли
1
Вот пример использования полностью сырого FontAwesome, превращающегося в скорую помощь: jsfiddle.net/GWqcF/2
Джеймс Доннелли,
6
@VivekChandra, да, верно! :-) Иконочные шрифты такие же, как и любой другой шрифт, за исключением того, что символы стилизованы под иконки. FontAwesome использует ряд символов, зарезервированных для «личного пользования» .
Джеймс Доннелли
1
Потрясающие. Спасибо за ресурсы - разберёмся, теперь все прояснилось.
Вивек Чандра
23

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

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Таким образом, директива содержимого CSS используется для вставки символа (который находится из специальной зарезервированной области Unicode для частного использования, которая не мешает другим читателям).

Тило
источник
2
Что означает косая черта f?
CodyBugstein 07
5
Не fявляется его частью, это просто шестнадцатеричное число 15. Обратная косая черта запускает escape-последовательность для шестнадцатеричного кода. \f004в CSS как в HTML.
Тило
11

Как работают иконки веб-шрифтов?

Иконки веб-шрифтов работают с использованием CSS для вставки определенного глифа в HTML с помощью свойства content. Затем он использует @font-faceдля загрузки веб-шрифта дингбата, который стилизует введенный глиф. В результате внедренный глиф становится желаемым значком.

Для начала вам понадобится файл веб-шрифта с нужными значками, либо определенные для определенных ASCIIсимволов, (A, B, C, !, @, #, etc.)либо в области частного использования шрифта Unicode, которые представляют собой пробелы в шрифте, которые не будут использоваться конкретными символами в Шрифт в кодировке Unicode.

Узнайте больше о том, как создать значок веб-шрифта, в разделе «Адаптивные значки веб-шрифтов» .

Артамоновев
источник