it-swarm.com.ru

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

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

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

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

75
Vivek Chandra

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

Glyphicons

Значки фактического шрифта (например, 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не поддерживается в старых браузерах, эти также используют images ,.

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

49
James Donnelly

Если ваш вопрос заключается в том, как класс 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 для частного использования, которая не мешает другим читателям).

18
Thilo

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

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

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

Подробнее о том, как создать значок веб-шрифта, можно узнать из Responsive Webfont Icons .

8
artamonovdev