详解CSS中iconfont的使⽤
初识iconfont
就算我们⼀开始不懂这个英⽂不懂是⼲嘛的，对于iconfont，英⽂从后往前读应该叫做：字体图标。这⾥⾯已经包含两个概念，⾸先必须是字体，第⼆，就是图标。我们都知道⽹页中的字体我们可以控制⼤⼩、样式、变形、拉伸、默认字体等属性，所以这个iconfont必须是以⽂字嵌⼊到样式中，所以想到的必须是font；既然是图标那么它就必须有⼀个路径来引⼊进来，⾸先我们⼀开始想到的img这个标签，既然⼜是⽂字⼜是图标，我们能想到的就只有这个@font-facecss3属性。
还有这个iconfont后来词语，并不是⼀开始就出现的，⽹页制作者或者学者想要叫起来更爽⼝所赋予的⼀个表现层的东西。
所以，当我们看见的图标教程如下：
第⼀步：使⽤font-face声明字体
CSS Code复制内容到剪贴板
1. @font-face {font-family: 'iconfont';
2.    src: url(''); /* IE9*/
3.    src: url('?#iefix') format('embedded-opentype'), /* IE6-IE8 */
4.    url('iconfont.woff') format('woff'), /* chrome、firefox */
5.    url('f') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
6.    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
7. }
第⼆步：定义使⽤iconfont的样式
CSS Code复制内容到剪贴板
1. .iconfont{
2.    font-family:"iconfont" !important;
css特效文字3.    font-size:16px;font-style:normal;
4.    -webkit-font-smoothing: antialiased;
5.    -webkit-text-stroke-width: 0.2px;
6.    -moz-osx-font-smoothing: grayscale;}
第三步：挑选相应图标并获取字体编码，应⽤于页⾯
CSS Code复制内容到剪贴板
1. <i class="iconfont">#x33</i>
效果如下
但是，Iconfont存在⼀些弊端：
浏览器将其视为⽂字进⾏抗锯齿优化，有时得到的效果并没有想象中那么锐利。尤其是在不同系统下对⽂字进⾏抗锯齿的算法不同，可能会导致显⽰效果不同。
Icon Font 作为⼀种字体，Icon 显⽰的⼤⼩和位置可能要受到font-size、line-height、word-spacing等等 CSS 属性的影响。Icon 所在容器的 CSS 样式可能对 Icon 的位置产⽣影响，调整起来很不⽅便。
使⽤上存在不便。⾸先，加载⼀个包含数百图标的 Icon Font，却只使⽤其中⼏个图标，⾮常浪费加载时间。如果是⾃⼰制作 Icon Font 以及把多个 Icon Font 中⽤到的图标整合成⼀个 Font 也⾮常不⽅便。当然使⽤阿⾥UX⽮量图标库可以解决这个问题
为了实现最⼤程度的浏览器⽀持，可能要提供⾄少四种不同类型的字体⽂件。包括TTF、WOFF、EOT 以及⼀个使⽤ SVG 格式定义的字体。如果是⾃⼰制作的话，可能要头疼死

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。