Font Awesome------设计原理分析

Font Awesome

http://www.bootcss.com/p/font-awesome/

不知道什么时候起,人们探索发现,CSS 嵌入字体不仅可以用来丰富 web 字体的表现,更可以用来实现 icons。原理是很简单的,自定义一种字体,给不同的字配置作为 icon 的图案,然后通过 CSS 嵌入其中使用。使用它可以轻松地解决上面所遇到的问题,因为一旦将 icons 当作普通 text 来处理,font-size,color 之类的文本修饰随手解决,有了 CSS3 的支持,加个 text-shadow,旋转几下是相当轻松的。

以下文章原创为知更鸟,以此引用只为交流学习。

在这里向各位看官推荐下。Font-Awesome,这个项目主要是css3的一个应用,准确的说是一段css,这里的把很多图标的东西做到了font文件里面,然后通过引用外部font文件的方式,来展现图标。看看效果 猛击这里到Font-Awesome

    那么看过以后大家有些疑惑,前端的同学可能会打开console看看具体的css代码,却没有发现任何的图片引用.其实大家可以在官方下载整个Font-Awesome项目,到目录的font下面,那个里面有很多font文件,那么,有兴趣的同学可以用font编辑软件打开看看font文件里面的内容,我想大概就明白了,我这里就截图吧。具体font软件有很多,我用的是FontLab Studio 5.

下面我有了font文件的内容,我们来看看怎么用font文件把图标显示出来,首先使用的是@font-face属性,来引用外部font文件。

  1. @font-face {

  2. font-family:<YourWebFontName>;

  3. src:<source>[<format>]

  4. [,<source>[<format>]]*;

  5. [font-weight:<weight>];

  6. [font-style:<style>];

  7. }

取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:”YourWebFontName”;”

2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;

4、weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

看看Font-Awesome里面的用法

  1. @font-face {

  2. font-family:'FontAwesome';

  3. src:url('../font/fontawesome-webfont.eot');

  4. src:url('../font/fontawesome-webfont.eot?#iefix')format('embedded-opentype'),

  5. url('../font/fontawesome-webfont.woff')format('woff'),

  6. url('../font/fontawesome-webfont.ttf')format('truetype'),

  7. url('../font/fontawesome-webfont.svgz#FontAwesomeRegular')format('svg'),

  8. url('../font/fontawesome-webfont.svg#FontAwesomeRegular')format('svg');

  9. font-weight:normal;

  10. font-style:normal;

  11. }

可能大家有疑问了,那么这个属性各浏览器的支持情况,还有就是万恶的ie6是否可以支持。我也查了,神奇的是@font-face这个属性早在ie6之前的版本就已经兼容了。我了个去~~。其它浏览器就不用说了,最新版本的FF,chrome,safari都支持的很好。不过字体文件的支持跟浏览器还是有关系的。对于各种后缀的font文件,我从别人的blog那copy了一段文字,给大家看看。
一、TureTpe(.ttf)格式:

.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;

二、OpenType(.otf)格式:

.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;

三、Web Open Font Format(.woff)格式:

.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;

四、Embedded Open Type(.eot)格式:

.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;

五、SVG(.svg)格式:

.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。

这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。

为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:

  1. @font-face {

  2. font-family:'YourWebFontName';

  3. src:url('YourWebFontName.eot?')format('eot');/*IE*/

  4. src:url('YourWebFontName.woff')format('woff'),

  5. url('YourWebFontName.ttf')format('truetype');/*non-IE*/

  6. }

但为了让各多的浏览器支持,你也可以写成:

  1. @font-face {

  2. font-family:'YourWebFontName';

  3. src:url('YourWebFontName.eot');/* IE9 Compat Modes */

  4. src:url('YourWebFontName.eot?#iefix')format('embedded-opentype'),/* IE6-IE8 */

  5. url('YourWebFontName.woff')format('woff'),/* Modern Browsers */

  6. url('YourWebFontName.ttf')format('truetype'),/* Safari, Android, iOS */

  7. url('YourWebFontName.svg#YourWebFontName')format('svg');/* Legacy iOS */

  8. }

看到这里,各位再回去看看Font-Awesome里面的写法,是不是就看懂了很多了呢。至于有不明白的同学,可以去google下,上面有很多相关资料。

既然我要使用里面的图标,那么多图标,怎么调用呢,这个是个大问题,样式名称就一个,怎么区分图标呢,各位不是看到我截的图了吗,就是font文件那张,里面看到图标的上面不是有16进制的序号吗。哦了,就是它,用图标上头的那个序号来找这个图标,来看看Font-Awesome里面某个样式的css定义

  1. .icon-glass::before {

  2. content:"f000";

  3. }

  4. [class^="icon-"]::before,[class*=" icon-"]::before {

  5. font-family:FontAwesome;

  6. font-weight:normal;

  7. font-style:normal;

  8. display:inline-block;

  9. text-decoration:inherit;

  10. }

如果前端看不懂那就不能原谅啦。至于其它同学,稍微解释下:[class^="icon-"]这个是选择匹配,就是icon开头的class,都应用这个样式。后面也一样,如果想深入了解,去w3c school那里有很多资料。关键是下面,icon-glass,看到了吗,content:后面,那个就是16进制的序号啦,有兴趣可以去Font-Awesome主页上面用console打开,改改里面的内容看看就明白了。关键是操作。至于上面其它的css大家可以慢慢看看的。

至于这么做有什么好处,不言而预。比较方便的管理图标文件,还有就是使用font来控制比使用background那引用简单便捷易于控制,而且对于很多不同浏览器对位置的计算不是一样的,那么有时候大家会发现,icon在不同的浏览器中表现的不是一样的,尤其是繁琐的定位。而且对于不同版本的浏览器引入的图片文件还不尽相同。这里又要说到万恶的ie6了,对于png图片,ie6下使用png8,解析度就要差很多。当然了ie6下也不支持以上写法,因为对于css3的支持还要从ie9开始才有很好的效果。只是一种解决的思路。

 

posted @ 2013-04-12 14:41 小郑 阅读(...) 评论(...) 编辑 收藏