摘要：最早走出扁平化设计的是微软，在年推出的，就用了大量的简单形状，移除了复杂的样式和纹理。但是它有个问题就是，雪碧图比较适合固定功能的网站。而且目前我们公司网站设计全部使用，我都好久没打开过了，对于来说，雪碧图位置的标识也是个挺麻烦的事情。
最近公司的设计人员想要把网站上面的小图标都改为iconfont，我也做了一篇PPT分享给大家，如果现在不记下来，可能过几个月就忘得一干二净了
一· 现代设计的趋势我们知道，传统设计的思路是拟物化，就是在电子设备中，模拟真实的世界。比如我们用的按钮，会有一些阴影的设计，让他看起来更像我们生活中用到的按钮。但是随着数字化越来越深入生活，拟物化的缺点也显现出来。首先就是人们不需要通过拟物来跨越现实世界和数字界面的鸿沟；其次就是信息的冗余，设计越来越专注于拟物的细节，反而无法凸显最直观的功能；最后就是复杂的拟物设计让人眼花缭乱，整体风格不够简洁。由此呢，新的设计理念应运而生，就是扁平化，他的基本理念是：去除冗余、厚重和繁杂的装饰效果，从让“信息”本身重新作为核心被凸显出来。最早走出扁平化设计的是微软，在10年推出的window phone7 ，就用了大量的简单形状，移除了复杂的样式和纹理。三年以后iOS7也采用了这种设计，自此扁平化设计开始在数字化设计用大规模的使用。
二· 传统的图片所存在的缺陷想要在页面展现一些图标，传统的方式使用的就是图片，但是使用图片存在许多的弊端，主要表现是下面三个方面
增加了页面的请求：我们知道每张图片都是一个请求，所以有些网站为了提高性能会使用雪碧图，把网页中比较小的一些小图片整合到一张图片文件中，再利用CSS的background-image属性插入图片，然后利用background-position属性对图片所需要的部分进行精确定位。但是它有个问题就是，雪碧图比较适合固定功能的网站。而我们的网站每隔几天就要加一个新的功能，添加和替换雪碧图是个很繁琐的工作。而且目前我们公司网站设计全部使用sktech，我都好久没打开过ps了，对于sketch来说，雪碧图位置的标识也是个挺麻烦的事情。
图片的大小和颜色不容易改变：background-size是一个CSS3的属性,ie8是不支持的，所以不能够使用它来设置图片的大小，有的时候为了更加清晰，设计会给我一个二倍图，那我想让他在IE8下面正常的尺寸展示，就只能使用img标签，这种形式不仅加重了请求，而且对雪碧图很不友好。其次是颜色，这些icon 有很多时候，想要hover上去有个效果，目前必须准备两张图片，如果想改变成多个颜色，就要准备多个图片。
最后一个也是近些年面临的一个问题，就是苹果的屏幕清晰度越来越高，在高像素下面，传统的位图会出现马赛克，不够清晰，为了调高清晰度，图片越来越大。
三· 什么是iconfont为了解决以上的问题，一种新的图标显示方法应运而生，那就是iconfont。iconfont，顾名思义，就是icon + font，即以字体的方式来显示图标，这个十分好理解，因为中文有时候也像一个个小图形。iconfont可以完美解决以上的问题，并具有以下的优点
由于请求的是一整个文件字体，所以减少了http的请求
可以像字体一样，任意变换大小和颜色；
矢量图，不会发生放大模糊的问题
结合CSS3的text-shadow，transform这些功能可以给字体添加一些旋转，阴影和透明度的视觉特效。
强兼容性，他的实现方式是使用CSS3的font-face, 但是这个属性从IE4开始就支持，可以完美适配IE6及以上的浏览器。
四· iconfont的使用方法iconfont一共有三种使用方式，具体参照阿里妈妈图标库的官方文档
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, iOS 4.2+*/
url("iconfont.svg?t=1511278425746#iconfont") format("svg"); /* iOS 4.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 是什么意思？
不同浏览器解析的字体格式不一样，formate就是告诉各种版本的浏览器，你支持这样的字体吗，支持的话就找这个URL
-webkit-font-smoothing: antialiased; 这是啥意思
这个是因为，字体在放大的时候，其边缘会出现锯齿状的样式，显示出来颗粒感很重，不够美观。而这个属性，叫做抗锯齿特性，功能就是把这些突出的小毛茬都切掉。而且要注意，这个属性只在Mac电脑上是有效的，因为苹果认为应该显示设计最原本的样式，这样屏幕上展示的内容和打印机打印出来的内容一样，但是微软认为展示的样式符合大众认识的美观更加重要，所以Windows7以上会自动开启ClearType的抗锯齿方法。
那-webkit-text-stroke-width: 0.2px;又是有啥用
用抗锯齿技术把小毛茬切掉以后，icon相当于比预想的要细了，使用这个功能，给图标描个0.2px的边，完美符合预期
没啥好说的和Unicode差不多，只不过用:after伪元素使用，我试了一下，IE8是支持伪元素的。但是不支持大小的修改，所以这种方式只能兼容IE9及以上的方式
3.symbol 方式传说是未来发展的趋势，可以展示多种颜色的图标。核心的代码是下面这段
.icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em; height: 1em;
/* 图标和文字相邻时，垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
vertical-align: -0.15em; 这么设置是为啥
因为SVG虽然可以使用font的方式对icon进行大小和颜色的变换，但是本质上不是font，而更像一张图片。这导致如果icon后面跟着文字的话，文字会按照baseline对齐icon的底端，为了让SVG表现的和font一样，就把后面的文字对齐icon的baseline位置，因为一般baseline距离bottom的距离是0.15，所以这个数值设置成了0.15em。至于为什么要采用这种看上去意义不明的计算方式而不是直接使用bottom属性，那是因为bottom这个属性在低版本浏览器（尤其是IE8）上产生的bug比较多，而数字计算的方式更加稳定。
9月的时候iconfont团队做过一次改版，他们应广大技术人员的要求，将woff文件默认转换成了base64的格式，因为base64将文件直接编码所以可以减少一次http请求。原则上IE8 是支持base64的，但是IE8对base64的解码有限制，如果进行64位编码后大于32K，则超过32K的部分不能被解码，我做过实验，就是使用只有两个图标生成的base64，十分短，放在IE8下面是好用的，但是实际项目的文件图标很多，就没办法正常的显示了。于是我到阿里的网站跟他们说明了情况，希望他们能够加一个关闭base64的功能，但是阿里的人员跟我说，天猫已经全线放弃IE8了，希望我们也放弃IE8.所以目前只能手动的将base64转为文件的地址，而且后续估计也要一直如此
六· 总结iconfont改完的页面肉眼可见的美观了不少，书写也十分的方便，目前主流的网站大部分都已经使用iconfont了，相信不久的将来他会遍布互联网的每个角落
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112777.html
摘要：那么，在我们当下的前端开发中，最常见的图标解决方案有哪些呢大概是三种，图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错，从 Web 诞生的那天开始，图标就成为视觉层面不可或缺的一个元素，在一个 Web 页面中，...
摘要：那么，在我们当下的前端开发中，最常见的图标解决方案有哪些呢大概是三种，图片和。 showImg(https://segmentfault.com/img/remote/1460000006774999);A picture is worth a thousand words, 一图胜千言。 没错，从 Web 诞生的那天开始，图标就成为视觉层面不可或缺的一个元素，在一个 Web 页面中，...
摘要：背景第一天练习支付宝小程序的时候写好了一个简单的页面后续是新增重置按钮连接后端接口然后加入图标网上看了很多小程序加图标例子说实话没有单独能成功的我也不记得结合了多少个才成功了还是自己写了篇文章记录下引入流程可能有点啰嗦但是比较详细连接后端接 背景:第一天练习支付宝小程序的时候写好了一个简单的页面.后续是新增重置按钮,连接后端接口.然后加入icon图标.网上看了很多小程序加icon图标例...
摘要：支持按字体的方式去动态调整图标大小，颜色等等。与使用方式相比，具有如下特点兼容性良好，支持，及所有现代浏览器。相比于语意明确，书写更直观。不过因为本质上还是使用的字体，所以多色图标还是不支持的。 使用阿里巴巴矢量图标库 用前准备 在线使用案例 三种使用方式介绍 vue项目(本地)使用iconfont字体图标 使用准备 进入 阿里巴巴矢量图标库 ，登陆以后，搜索需要的图标...
阅读 1867·2021-11-24 09:39
阅读 2345·2021-09-30 10:00
阅读 3344·2021-09-22 10:54
阅读 5151·2021-09-07 10:28
阅读 2793·2019-08-29 13:53
阅读 618·2019-08-29 12:42
阅读 819·2019-08-26 13:51
阅读 1136·2019-08-26 13:32
