W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其实挺多,但一直懒于写blog,也经常会出现一些知识点重复去查询,一些知识点难以及时分享与讨论。ADT团队在不断的成长与壮大中,于是鞭策自己尽量多的习惯去记录,也为了知识更好的分享与积累吧。
现在来看,应该大家都接触过css3的自定义字体(@font-face),也应该知道各个浏览器都支持(包括IE6),只是各自对字体文件的格式的支持不一样。
为什么要将icon做成字体?
怎样才能将icon变成字体?
实际举个例子吧
可以看到字体对应的字符是odieresis,unicode编码是00F6。而实际字体图像已经变成“+”了。
字体格式的浏览器支持: 先使用font-face声明字体:
@font-face { font-family: "iconfont"; src: url('iconfont.eot'); /* IE9*/ src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('iconfont.woff') format('woff'), /* chrome、firefox */ url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */}
注:以上来自于:iconfont.cn以及webfonts.info 注:woff是最新的web开放字体格式(web open font format),w3c推荐,主要优势是针对浏览器进行优化,字体文件小。
然后,在icon元素上使用该字体就好了:
.iconfont { font-family:"iconfont" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}.icon-liebiao:before { content: "\e600"; }
到此我们就基本能算大功告成了。 IE9以前只支持eot格式,所以需要将ttf转换为eot先。 可以使用微软官方的WEFT软件,也可以使用一些在线工具: http://www.kirsle.net/wizards/ttf2eot.cgi 在线转ttf为eot格式; http://www.fontsquirrel.com/fontface/generator强大的在线转ttf为eot、woff等字体格式 另外,eot文件必须添加域名白名单才可以使用,推荐使用CreateMyEOT:
最后是字体文件跨域问题: 这个是在实际项目中出现的问题,找了几种方式。有些是要服务器上去配置,前端能解决的,目前我是用很强盗的形式, 把这个存在跨域问题的文件,转成base64编码,比如ttf文件,只需要找一下转成base64的就行。
例如我这个把文件往上面一拖,把这段编码copy到css文件就行。(注:此工具是同事as3long制作。特此感谢。)
总结: iconfont已经很强大了,轮子是否需要继续创造,就看团队了。 css3很强大,html5标准也终于完工,未来的路很长,人很累,所以先吃饱再说。