CSS3 icon font彻底指南(CSS3 font 会替代icon标志)

日期:2021-01-20 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

为何要将icon做成字体样式?

在许多网站新项目中,大家经常会用到各种各样全透明小标志,随后网站要适配各个访问器,也将会会有好几个规格,乃至还要考虑到换肤等要求。那末大家就要将这些小标志輸出为多种多样规格、色调和文档文件格式,例如png8 alpha全透明或png8 index全透明等。

例如,twitter用到的各种各样小icon:

这类状况下,应用字体样式来完成标志就有许多优点:

字体样式文档小,1般20⑸0kb; 非常容易编写和维护保养,规格和色调能够用css来操纵; 全透明彻底适配IE6; 怎样将icon变为字体样式?

最重要的是要将设计方案稿中的icon(要有矢量相对路径,位图无法转换)完善复原成字体样式,这其实不是很不便。

大家要用到1些字体样式编写手机软件,例如FontCreator、FontLab等,这里大家用FontLab来演试。

复原流程很简易:

PSD–>eps–>FontLab,将要PSD变换为illustrator的eps文件格式,随后将某个标识符拷贝到FontLab中便可。

实际流程:

开启设计方案稿psd,将其储存为Photoshop eps文件格式,大家这里以Qzone中说说发布框的小表情icon为例:

在illustrator中开启储存的eps文档:

撤销排序,随后点选某个icon,拷贝。

开启FontLab,随意开启1款字体样式文档,例如tahoma.ttf:

随后双击鼠标某个标识符,将原来图型删掉,粘贴刚刚拷贝的icon目标:

调剂图型尺寸,1个icon就进行复原了。

便是这么简易。全部icon复原完以后,转化成字体样式文档便可以了。

查询字体样式对应标识符,能够在字体样式目录中,在某个字体样式上右键查询特性(便捷键Alt+Enter),查询该字体样式对应的标识符:

能够看到字体样式对应的标识符是i,unicode编号是0069。

字体样式文件格式的访问器适用:

现阶段,各个访问器对字体样式文件格式的适用是最大的差别:

webkit/safari:适用TrueType/OpenType(.ttf),OpenType PS(.otf),iOS4.2+适用.ttf,iOS 4.2下列只适用SVG字体样式; Chrome:除webkit适用的之外,从Chrome 6刚开始,刚开始适用woff文件格式; Firefox:适用.ttf和.otf,从Firefox 3.6刚开始适用woff文件格式; Opera:适用.ttf、.otf、.svg。尚不适用woff Opera 11刚开始适用WOFF(多谢Apostle提示~~); IE:只适用eot文件格式,IE9刚开始适用woff。

注:以上材料来自于:webfonts.info

注:woff是全新的web对外开放字体样式文件格式(web open font format),w3c强烈推荐,关键优点是对于访问器开展提升,字体样式文档小。详细信息可查询wiki:

在CSS中应用icon字体样式:

先应用font-face申明字体样式:

拷贝编码
编码以下:

@font-face {
font-family: 'emotion';
src: url('emotion.eot'); /* IE9*/
src: url('emotion.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('emotion.woff') format('woff'), /* chrome、firefox */
url('emotion.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('emotion.svg#svgFontName') format('svg'); /* iOS 4.1- */
}

随后,在icon元素上应用该字体样式就行了:

拷贝编码
编码以下:

.icon{font-family:"emotion" Tahoma;
...
}

最终,在网页页面中应用这个字体样式:

拷贝编码
编码以下:

<span class="icon">i</span>

适用CSS3的访问器能够更上流1点儿,大家每次改动html将会没那末便捷,假如要更改某个icon,则将会必须改动有关标识符,例如将i改动为e等。假如应用css3的伪元素,能够便捷许多:

拷贝编码
编码以下:

.icon{
display:inline-block;
width:16px;
height:16px;/*占个位**/
...
}
.icon:after,.icon::after{
font-family:"emotion" Tahoma;
display:inline-block;
content:"i";/*在这里启用标识符*/
width:16px;
height:16px;
margin-left:⑴6px;/*position:absolute甚么的还可以,看实际状况*/
}

嗯,便是用具体元素占位,用伪元素+content特性显示信息icon,随后遮盖到具体元素上面,以后大家改动某个icon只必须变更css款式便可以了。

IE仍然繁杂:
由于IE9之前只适用eot文件格式,因此必须将ttf变换为eot先,这里可使用微软官方的WEFT手机软件,还可以应用1些线上专用工具:
http://www.kirsle.net/wizards/ttf2eot.cgi 线上转ttf为eot文件格式;
http://www.fontsquirrel.com/fontface/generator强劲的线上转ttf为eot、woff等字体样式文件格式
此外,eot文档务必加上网站域名白名单才可使用,这里强烈推荐应用CreateMyEOT:

总结:
实际上,这类方式有1个不够,便是只适用单色icon,数最多能高档访问器上完成渐变色色或图型蒙板。
自然,大家有许多情景是用单色icon,非常是在Windows 8这类Metro UI刚开始愈来愈多的情况下。
此外,这类方式能够合理降低网页页面的恳求,可是针对习惯性应用CSSGaGa的auto sprite作用的同学来讲,这类方式对网页页面特性的提高不大。
可是针对挪动终端设备,非常是webapp中,这类方式還是有很大的用武的地方的,能够很便捷的适配多辨别率,相互配合线下储存实际效果更佳。
假如你有这层面更好的提议和建议,欢迎提出。

上一篇:运用css3制做三d款式按钮完成编码 返回下一篇:没有了