HTML中用自定义字体实现小图标icon(不是原做, 只是一个研究笔记)

最近在作一个项目时, 研究了一下新浪微博的前端, 看到首页中那个图标了吗, 之前看到这类效果的第一反应就是用一个gif之类的图标作出来!!

但在研究的过程, 发现了一个小技巧, 注意那个em标签中的文本是E, 但显示出来一个相似ICON的图标. 

 

既然是HTML+CSS写出来的, 那么应该是由css控制显示出来的效果的.

 

 

其余的一些css基本没什么问题, 都理解了, 但只有这个 font-family, 强制设置成了 "wbficonregular", 通常操做系统里应该没这个命名的字体吧!!

又乱点了一下谷歌的调试器, 发现有加载字体文件的!! 并且在其中一个字体文件中, 发现和首页图标同样形状的东西!! 

 

 

百度一下, woff是一种字体文件!! 

因而我就想 应该也有软件能够制做本身的字体文件吧. 百度一下, 找到了名为 FontCreator 的软件!! 

 

文件 -> 新建 

 

字符集 , 字体样式 和 预约义轮廓我都按默认值弄,  其中预约义轮廓 选 包括轮廓, 是让新建的字体文件默认就有几个字符的了, 通常我都直接修改就好了!! 

例如我把 数字字符0 修改一下 在数字字符0 上右键-> 编辑

 

在出现的窗口, 点0的正中间 就能够拖动选框, 修改它的形状 (只为作实例)

=>

好了, 保存!! 

 

接下来, 把刚刚作的字体用到html编写中去!! 

 

只是作个实例, 仍是把css写到html中吧

 

谷歌浏览器的效果

 

这个时候不要想完工了, 用万恶的IE打开看看

 效果出不来?? 百度一下css自定义字体的兼容问题

来源 http://www.w3cplus.com/content/css3-font-face

1、TureTpe(.ttf)格式：

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

2、OpenType(.otf)格式：

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

3、Web Open Font Format(.woff)格式：

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

4、Embedded Open Type(.eot)格式：

.eot字体是IE专用字体，能够从TrueType建立此格式字体,支持这种字体的浏览器有【IE4+】；

5、SVG(.svg)格式：

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

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

(这里, 我小小偷了一下懒, 我仍是用ttf, 由于我还没找一个好点的ttf转woff的软件)

 

这其中, ttf 转eot, 须要一个小软件, 下载地址 http://download.csdn.net/detail/u010488325/6235387

 在f.ttf旁边就多了一个f.eot, 

 

用css hack把f.eot文件加进以前的字体引用中

看效果 

 

总结一下, 

用这种方法给一些a标签 ul中的li标签 加一个icon, 其实很方便的, 并且只要制做的字体文件内容很少, 它的大小也就几k吧, 有些状况下相对于图片的icon好一些.

另外, 这种方法作的icon, 只能是纯色的, 像一些icon是有渐变效果的, 仍是用图片会好一些啰, 这个在开发的时候自行衡量呗!!