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

<p>я понимаю, что шрифты значков - это просто шрифты, и вы можете получить значки, просто вызвав их имя класса, но <strong> <em> how </em> </strong> работают ли иконочные шрифты?</p><p>я попытался проверить связанные ресурсы шрифтов значков, загруженных в chrome, чтобы увидеть, как шрифты значков отображают значки (по сравнению с обычными шрифтами), но я не смог понять, как это происходит.</p><p>мне также не удалось найти ресурсы о том, как выполняется эта "техника шрифтов значков", даже несмотря на то, что доступно множество <a href="http://thenextweb.com/dd/2012/10/12/7-gorgeous-icon-fonts-to-speed-up-your-site-and-your-design-process/"><strong> значков шрифтов </strong></a> . есть также множество ресурсов, показывающих, как шрифтовые значки могут быть интегрированы <a href="http://fortawesome.github.com/font-awesome/#integration"><strong> </strong></a> , но никто, кажется, не делится или пишет о <strong> <em> как </em> </strong> это сделано!</p>

<p> <a href="http://glyphicons.com/">глификоны</a> являются <a href="http://glyphicons.com/wp-content/themes/glyphicons/images/glyphicons\_halflings.png">изображения</a> и <em> не являются </em> шрифтом. все значки находятся в изображении sprite (также доступны в виде отдельных изображений) и добавляются к элементам в виде <code>backround-image</code>s:</p><p><img src="https://i.stack.imgur.com/rnn2i.png" alt="glyphicons"></p><p>значки фактического шрифта (например, <a href="http://fortawesome.github.com/font-awesome/">fontawesome</a> ) <em> делают </em>, например, загружают определенный шрифт и используют свойство <code>content</code>, например :</p><pre><code>@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"; } </code></pre><p>так как свойство <code>content</code> <a href="http://caniuse.com/#search=content">не поддерживается</a> в старых браузерах, эти <em> также </em> используют <a href="http://fortawesome.github.com/font-awesome/assets/img/glyphicons-halflings.png">images</a> ,.</p><p>вот пример полностью необработанного fontawesome, используемого в качестве шрифта, превращающего <code></code> ( - вы не сможете увидеть это!) в скорую помощь: <a href="http://jsfiddle.net/gwqcf/2">http://jsfiddle.net/gwqcf/2</a> </p>

<p>если ваш вопрос заключается в том, как класс css может вставить определенный символ (который будет отображаться как значок в специальном шрифте), взгляните на <a href="https://github.com/fortawesome/font-awesome/blob/731953d9efa9e83a8f13d296de605057d0fb366d/web-fonts-with-css/css/fontawesome-all.css#l1756">источник для fontawesome</a> :</p><pre><code>.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"; } </code></pre><p>таким образом, директива содержимого css используется для вставки символа (который находится в специальной зарезервированной области unicode для частного использования, которая не мешает другим читателям).</p>

<p><strong> как работают значки веб-шрифтов? </strong></p><p>значки веб-шрифтов работают с использованием css для вставки определенного глифа в html с помощью свойства content. затем он использует <code>@font-face</code> для загрузки веб-шрифта dingbat, который стилизует введенный глиф. в результате этот введенный глиф становится нужным значком.</p><p>для начала вам понадобится файл веб-шрифта с необходимыми значками, либо определенными для определенных символов <code>ascii</code> <code>(a, b, c, !, @, #, etc.)</code>, либо в частной области использования шрифта unicode, которые являются пробелами в шрифте, которые не будут использоваться определенными символами. в кодировке unicode.</p><p><strong> подробнее о том, как создать значок веб-шрифта, можно узнать из <a href="http://webstandardssherpa.com/reviews/responsive-webfont-icons/?utm\_source=buffer&utm\_campaign=buffer&utm\_content=buffereac5b&utm\_medium=google">responsive webfont icons</a> . </strong></p>