最近公司的设计人员想把网站上所有的小图标都换成iconfont。我也做了一个PPT分享给大家。如果你现在不把它记下来，你可能会在几个月后忘记做它。景逸·现代设计的趋势我们知道，传统设计的思路是拟物化，就是在电子设备中模拟现实世界。比如我们使用的按钮都会有一些阴影设计，让它们看起来更像我们生活中使用的按钮。然而，随着数字化在生活中越来越深入，拟物化的弊端也随之显现。首先是人们不需要通过拟物化来跨越现实世界和数字界面之间的鸿沟；其次，信息冗余，设计越来越注重拟物化的细节，而不能突出最直观的功能；最后是复杂的拟物化设计，让人眼花缭乱，整体风格不够简洁。于是，一种新的设计理念应运而生，这就是扁平化。其基本理念是：去掉多余、繁复的装饰效果，让“信息”本身作为核心再次凸显。微软是第一个走出扁平化设计的。2010年推出的windowphone7使用了大量简单的造型，去掉了复杂的样式和纹理。三年后，iOS7也采用了这种设计。从那时起，扁平化设计在数字设计中得到了广泛的应用。2、传统图片的缺陷如果要在页面上显示一些图标，传统的方式是使用图片，但是使用图片有很多缺点。主要表现为以下三个方面增加了页面的请求：我们知道每张A图都是一个请求，所以有些网站为了提高性能，使用精灵图片，将网页中的一些小图片整合成一个图片文件，以及然后使用CSS的background-image属性插入图片，再使用background-position属性精确定位图片中需要的部分。但是它有一个问题，就是Sprite更适合固定功能的网站。而我们的网站每隔几天就需要添加一个新的功能。添加和替换精灵图像是一项非常繁琐的工作。而目前我们公司的网站设计都是使用sktech。好久没打开PS了。对于Sketch来说，Sprite贴图位置的识别也是一件很麻烦的事情。图片的大小和颜色不易改变：background-size是一个CSS3属性，ie8不支持，所以不能用来设置图片的大小。有时为了更清晰，设计会给我一张双图，然后我想让它在IE8下以正常大小显示，所以我只能使用img标签。这种形式不仅加重了请求，而且对sprite图片也很不友好。第二是颜色。这些图标通常会对悬停产生影响。目前需要准备两张图片。如果要改成多种颜色，则必须准备多张图片。最后一个也是近几年面临的问题，就是苹果的屏幕分辨率越来越高。高像素下，传统位图会出现马赛克，不够清晰。为了提高分辨率，图片越来越大。3、什么是iconfont为了解决以上问题，一种新的图标显示方式应运而生，那就是iconfont。iconfont，顾名思义，就是图标+字体，即以字体的形式显示图标。这个很好理解，因为有时候中文就像小图形一样。iconfont可以完美解决以上问题，并具有以下优点。由于请求是针对整个文件字体，因此减少了HTTP请求。可以像字体一样任意改变大小和颜色；矢量图形，没有放大和模糊的问题CSS3的文本阴影和变换功能可以为字体添加一些旋转、阴影和透明的视觉效果。兼容性强，它的实现方式是使用CSS3的font-face，但是这个属性从IE4开始就支持了，可以完美适配IE6及以上浏览器。四。iconfont的使用方法iconfont的使用方法有3种。详见阿里妈妈图标库官方文档1.我们系统目前使用的是Unicode方式。这种方式的优点是完美适配IE8，核心思想就是这两段代码@font-face{font-family:"iconfont";src:url('iconfont.eot?t=1511278425746');/*IE9*/src:url('iconfont.eot?t=1511278425746#iefix')format('embedded-opentype'),/*IE6-IE8*/url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABLQAAsAAAAAHGQ')format('woff'),url('iconfont.ttf?t=1511278425746')format('truetype'),/*chrome,firefox,opera,Safari,Android,iOS4.2+*/url('iconfont.svg?t=1511278425746#iconfont')格式('svg');/*iOS4.1-*/}.iconfont{font-family:"iconfont"!important;font-size:16px;font-style:normal;-webkit-text-stroke-width:0.2px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}为什么要把IE9的设置挑出来？微软老爸做事，在IE9的兼容模式下，不支持后一种写法，所以拿出来直接适配IE9。为什么IE6-IE8的URL上有#IEfix？微软最初支持font-face功能的时候，font-face并没有被纳入标准。低版本的IE会把url中第一个引号到最后一个引号当成一个URL，解析后一定是404，所以加了一个IEfix，说明下面是锚点的内容，有帮助浏览器正确解析。锚点的名称是什么无关紧要甲酸是什么意思？不同的浏览器解析出来的字体格式是不一样的。formate告诉各种版本的浏览器，你支持这样的字体吗？如果是这样，请查找此URL-webkit-font-smoothing:antialiased;这是什么意思？这是因为，当字体放大时，其边缘会出现锯齿状，说明颗粒感较重，不够美观。而这个属性叫做抗锯齿特性，它的作用就是把这些突出的小茬都剪掉。并且需要注意的是，这个属性只在Mac电脑上有效，因为Apple认为应该展示最原始的设计风格，让屏幕上显示的内容和打印机打印出来的内容一样，但是微软认为所展示的风格符合公众的理解。美学更重要，因此ClearType抗锯齿方法将在Windows7及更高版本上自动启用。然后-webkit-text-stroke-width:0.2px;什么用途？用抗锯齿技术剪掉小茬后，图标相当于比想象中的要瘦。用这个函数给图标Side画了0.2px，完美符合预期2.fontclass方法没什么好说的，和Unicode类似，只不过是和:after伪元素一起使用。我试过了，IE8支持伪元素。但不支持修改大小，所以该方法只兼容IE9及以上版本。3、符号方式据说是未来的发展趋势，可以显示各种颜色的图标。核心代码如下.icon{/*通过设置font-size*/width:1em来改变图标大小；height:1em;/*当图标与文本相邻时，垂直对齐*/vertical-align:-0.15em;/*通过设置color/fill改变SVG的颜色*/fill:currentColor;/*overflowviewBox部分path和stroke会在IE下显示。这一行也包含在normalize.css*/overflow:hidden;}vertical-align:-0.15em;之所以这样设置，是因为SVG虽然可以使用font方法来变换图标的大小和颜色，但本质上它并不是字体，更像是图片。这导致如果图标后跟文本，文本将根据基线与图标底部对齐。为了让SVG表现得和字体一致，下面的文字对齐到图标的基线，因为基线和底部的距离一般是0.15，所以这个值设置为0.15em。至于为什么用这种看似模棱两可的计算方式而不是直接使用bottom属性，是因为bottom属性在低版本浏览器（尤其是IE8）中bug较多，数字计算方式更稳定。.5.踩过的坑9月份，iconfont团队进行了改版。应广大技术人员的要求，他们默认将woff文件转为base64格式。因为base64直接对文件进行编码，所以可以减少一次http请求。IE8原则上是支持base64的，但是IE8对base64的解码有限制。如果64位编码后大于32K，超过32K的部分无法解码。我做过实验，就是用base64生成，只有两个图标。很短小，在IE8下很好用，但是实际项目中文件图标较多，无法正常显示。于是我就去阿里的网站跟他们说明情况，希望他们能增加一个关闭base64的功能，但是阿里的工作人员告诉我，天猫已经全面放弃IE8，希望我们也放弃IE8。所以目前，我们只能手动完成。将base64转成文件的地址，估计以后还会继续这样。6.小结iconfont修改后的页面肉眼漂亮了很多，写起来也很方便。目前大部分主流网站都已经使用了iconfont。相信在不久的将来他会无处不在互联网的每一个角落
