超越 icon font

一丝
2014-6-28 于上海

关于我

我是一丝

阿里巴巴前端

「前端快爆」作者

我的偶像？

我的特质？

事实是？

我的特质？

如何快速切图？

很久以前……

我们如何使用图标？

1.切图

2.拼合（Sprites）

原始社会

后来

再后来……

现实是？

换个颜色

改个大小吧

换个角度吧

欧巴→欧吉桑

什么是(zhi)体图标捏？

就是用(zhi)体语言摆个图标

相见不曾相识……

sofish

iOS 自带的字体图标

Emoji 绘文字

相见不曾相识……

扒衣见君

iconfont 实时预览

icon font 效果

icon font 效果

淘宝首页

淘宝集市

如何制作 icon font

  • iconfont.cn 直接上传 SVG

iOS7 图标栅格

iOS7 photo icon

制作的注意事项

制作的注意事项

制作的注意事项

如何使用？

1. 引用字体


@font-face {
  font-family: 'FontName';
  src:url('FileName.eot'); /* IE9+ */
   /* IE6-IE8 */
  src:url('FileName.eot?#iefix') format('embedded-opentype'),
  /* CR,FF */
  url('FileName.woff') format('woff'),
  /* CR,FF,OP,Safari,Android, iOS 4.2+ */
  url('FileName.ttf') format('truetype'),
  /* iOS 4.1- */ 
  url('FileName.svg#FontName') format('svg'); 
}

如何使用？

2. 定义一个Class使用字体


.iconfont {
  font-family: "iconfont";
  font-size: 16px;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  speak: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

如何使用？

3. 获取图标编码


#3301

为何要用 icon font？

icon font 优点

  • 图标矢量化
  • 让样式回归 CSS 
    

    标题前面有一个图标
    
.icon-size {
    content: "\3436";
}
  • 图标规范化
  • 自动上传到阿里云CDN

icon font 缺点

  • 色彩单一？
  • 不同平台显示效果参差不齐
  • 需要专门维护

超越 icon font？

见证奇迹的时刻到了！

多彩图标

撸一撸

多彩图标-镂空法

放大后：

多彩图标-叠加法

响应式图标

响应式图标

设计与辨识度的平衡

未来？

SVG 矢量动画图标

SVG 矢量动画图标

livicons

Q&A

Thank You ^_^

《超越 icon font》上海场