初识iconfont
就算我们一开始不懂这个英文不懂是干嘛的,对于iconfont,英文从后往前读应该叫做:字体图标。这里面已经包含两个概念,首先必须是字体,第二,就是图标。我们都知道网页中的字体我们可以控制大小、样式、变形、拉伸、默认字体等属性,所以这个iconfont必须是以文字嵌入到样式中,所以想到的必须是font;既然是图标那么它就必须有一个路径来引入进来,首先我们一开始想到的img这个标签,既然又是文字又是图标,我们能想到的就只有这个@font-facecss3属性。
还有这个iconfont后来词语,并不是一开始就出现的,网页制作者或者学者想要叫起来更爽口所赋予的一个表现层的东西。
所以,当我们看见阿里巴巴的iconfont的图标教程如下:
第一步:使用font-face声明字体
第二步:定义使用iconfont的样式
第三步:挑选相应图标并获取字体编码,应用于页面
效果如下
但是,Iconfont存在一些弊端:
浏览器将其视为文字进行抗锯齿优化,有时得到的效果并没有想象中那么锐利。 尤其是在不同系统下对文字进行抗锯齿的算法不同,可能会导致显示效果不同。
新闻热点
疑难解答