Шрифты значков: как они работают?

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



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



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

869   3  

3 ответов:

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

Glyphicons

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

42  
2013-03-19 17:43:35

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

14  
2018-04-13 23:25:45

Как Работают Значки Webfont

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

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

здесь вы можете прочитать, Как создать значок webfont ->ссылке

7  
2017-01-13 19:55:14

Comments

    Ничего не найдено.
Click here to cancel reply.