Skip to main content

All our posts

最近使用的几种图标字体库

Zhao chen

0. 前言#

比较基础的图标加载：<img src="x.png"> 和块元素的背景background: url(./x.png).

页面多图标时，使用雪碧图（多个png压缩成一个png，定位来使用），减少图片所占空间。

大屏显示，为保证图标清晰度，可以使用svg格式的图片。svg是矢量图，直接更改svg代码中path的fill改变颜色。

可自编辑开源svg库 http://www.iconfont.cn/home/index

图标字体库，图标被生成字体文件，通过class决定图标，font-size决定大小，color决定颜色。主要使用的是css中伪类：before、css3中的@font-face,因而继承了font的其他规则。

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}

适用：单色图标

1. Font Awesome#

class="fa fa-name fa-size fa-pull-left" 前两个必有

优点：开箱即用

缺点：扩展麻烦，项目加载过多无用图标

http://fontawesome.dashgame.com/

2. IcoMoon#

class="icon-name"

优点：易于扩展，包括自己团队做的svg图标可在官网生成相应的fonts文件

缺点：扩展更新，一旦出现问题，会影响项目其他图标的显示。无团队管理。

https://icomoon.io/app/#/select

3. iconfont#

优点：在线svg下载和简单编辑。自定义图标字体库。团队管理，可在线引用。

缺点：

4. 更新图标库#

扩展自己的图标库

  1. 扩展.eot.svg.ttf.woff等相关字体库
  2. 伪类
.icon-name:before {
content: "\f003";
}

https://github.com/daaasheng/dash/tree/master/icon

5.常见问题#

图标未闭合#

需处理svg为闭合路径。

颜色填充#

导入时最好，无颜色填充。
.icon-name:before {
content: "\f003";
}
css中有颜色时， 使用时color会失效。
.icon-name:before {
content: "\f003";
color: red;
}

如何处理圆形图标#

display: block;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
-moz-border-radius: 50%;
-weblit-border-radius: 50%;

不可在图片上添加文字#

译-提升页面性能的最好实践(雅虎35条军规)

Zhao chen

内容#

  1. 尽可能减少HTTP请求
  2. 减少DNS查找（即具体IP代替域名）
  3. 避免重定向
  4. 设置Ajax可缓存
  5. 延迟加载组件
  6. 预加载组件
  7. 减少DOM元素数量
  8. 跨域分割组件
  9. 尽可能减少iframes数量
  10. 避免404

服务#

  1. 使用CDN（内容分发网络）
  2. 添加Expires和Cache-Control头部
  3. 压缩组件
  4. 配置ETags
  5. 清空缓存区
  6. 对Ajax使用GET请求
  7. 避免Image标签的src为空

cookies#

  1. 减少Cookie的体积（大小）
  2. 为组件使用没有cookie的域

样式#

  1. CSS文件在顶部引用
  2. 避免CSS表达式
  3. 使用替代[@import ](/import )
  4. 避免filter

JavaScript#

  1. 放置Scripts在底部
  2. 把JavaScript和CSS放外边
  3. 压缩JavaScript和CSS
  4. 删除重复的Scripts
  5. 尽可能减少访问DOM
  6. 开发事件智能处理

图片#

  1. 优化Images
  2. 优化CSS雪碧图
  3. 不要在HTML中放缩Images
  4. 使用小的收藏夹图标并缓存

移动端#

  1. 组件大小控制在25KB以下
  2. 打包组件到一个复合文档

原文链接