icon 的各种实现方式
作者:
_空空 | 来源:发表于
2017-07-12 16:30 被阅读239次
icon 的各种实现方式
- 需求：一个页面上有很多个小图标
- 实现方式：
- image
- CSS Sprites
- Icon Font
- CSS Icon
- SVG（目前来看，是最完美的）
使用 image 实现
- 注意事项：
- img 的大小设置
- img 的 vertical-align
- 请求数过多
- 因为每一个请求都是需要花时间去建立的，HTTP 1.1 时代，客户端（浏览器）是慢的，但如果升级到了 HTTP 2，100个请求跟1个请求是差不了多少的
- 在服务器端（server），比如是用 php、java 实现的后端，请求过多，一般会导致线程过多，或大或小都会产生一定的压力
- 另外，请求过多，对网站流量也会有一定的影响，流量要要花钱的
CSS Sprites（CSS 精灵图）
- 最开始我们是 人肉拼 Sprites
- 现在可以使用命令行
- google：npm css sprites，可以找到 sprity。通过文档中的 sprity-cli 来查看如何在命令行中使用它
- 安装完成后，比如使用命令
sprity create build resource/*.png -s style.css。这里意思是将 resource 目录下的 png 格式图片生成 scripts 以及 名为style.css的文件，并放在 build 目录下。这样我们就可以在代码中直接引用了，直接加上对应的 icon 类名即可
- 或使用在线工具：（google：css sprites generator）
- 缺点：
Icon Font 把字体做成图标
- 制作字体文件
- 声明 font-family
@font-face
- 使用 font-familt
- 使用 HTML 实体字符，写在标签里面（所有浏览器都兼容）
- 或使用 CSS
:before（IE7-不支持） —— CSS Entities
<style type="text/css">
span:before {
content: "\00A9";
}
</style>
</head>
<body>
<span>©</span>
</body>
CSS icon 用 CSS 画
- CSS 能画圆，能画方，为什么不能画 icon？
- 参考网站：CSS ICON
- 兼容性：IE支持不太好，比如
border-radius IE8-不支持
SVG
- svg 可以作为图像的地址直接传入：
<\img src="svg">，但是这样依然会造成请求数过多
- 还可以使用 SVG "sprites"
- google：npm svg sprites，看排名靠前的，比如 svg-sprite
- 它是以标签的形式来组织所有的图片的，移动端首选
- 优点：可以方便的修改 icon 的大小、颜色，缩放没有锯齿
本文标题：icon 的各种实现方式
本文链接：https://www.haomeiwen.com/subject/ftdbhxtx.html
网友评论