图标字体：它们如何工作？ [英] Icon Fonts: How do they work?

问题描述

我了解图示字型只是字型，只要调用其类别就可以取得图示，但 如何图示字型可以运作？

我试过检查在Chrome中加载的相关图标字体资源，以查看图标字体如何显示图标（与一般字体相比），但我还无法确定如何发生。

我也没有成功找到有关如何使用这个图标字体技术的资源，即使有大量的） 涉及下载特定字体并使用 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; 
} 
  

由于内容在旧版浏览器中不支持，这些也使用图片。

这是一个完全原始的FontAwesome用作字体的例子，转动&＃xf0f9; （&＃xf0f9; - 你可能不能看到这个！）到救护车： http://jsfiddle.net/GWqcF/2 p>

I understand that icon fonts are just fonts and that you can get the icons by just calling their classname, but how do icon fonts work?

I've tried checking the related icon font resources loaded in Chrome to see how icon fonts display icons (in comparison to general fonts) but I haven't been able to figure out how this happens.

I've also been unsuccessful in finding resources on how this "icon font technique" is done, even though there are loads of icon fonts available. There are also loads of resources showing how icon fonts can be integrated, but no one seems to be sharing or writing about how this is done!

解决方案

Glyphicons are images and not a font. All the icons are found within a sprite image (also available as individual images) and they are added to the elements as positioned backround-images:

Actual font icons (FontAwesome, for instance) do involve downloading a specific font and make use of the content property, for instance:

@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";
}

As the content property isn't supported in older browsers, these also make use of images.

Here's an example of completely raw FontAwesome in use as a font, turning  ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2

这篇关于图标字体：它们如何工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！