WEB ICON 的探讨

2024-04-27 14:28:16

字体：大中小

来源：转载

供稿：网友

WEB ICON 的探讨

一般考虑到webicon 就是CSSSPRite和自定义font；本文基于下述而总结和进行分析，如有笔误有望指出，谢谢

在线教程：用字体在网页中画ICON图标http://www.imooc.com/learn/243
免费图标：
https://icomoon.io/#home
制作font教程：
webfont应用系列（一）位图如何转成矢量？http://ntesmailfetc.blog.163.com/blog/static/206287061201241854857235/
webfont应用系列（二）如何制作图标字体？http://ntesmailfetc.blog.163.com/blog/static/206287061201292631536545/

CSSSprite

对于小图标图片进行合并,

Css

.icon{

background: url(icon.png) no-repeat;

display: inline-block;

vertical-align: middle;

}

.icon_weibo{

width:24px;

height:19px;

background-position: -1px -45px;

}

Html

主要是使用了background,把对应的元素背景定义为icon.png;而且修改icon的时候会改动图片和代码个人建议把icon.png放在css文件夹中方便维护;

优点:图片小;兼容性好;图标可以颜色丰富

缺点:放大,模糊(R屏放大也在考虑范围) 维护成本高,

Font

首先需要理解各个字体格式的兼容性

手册
脚本之家
@Font-face目前浏览器的兼容性：
•Webkit/Safari(3.2+)：TrueType/OpenType TT (.ttf) 、OpenType PS (.otf)；
•Opera (10+)： TrueType/OpenType TT (.ttf) 、 OpenType PS (.otf) 、 SVG (.svg)；
•Internet Explorer：自ie4开始，支持EOT格式的字体文件；ie9支持WOFF；
•Firefox(3.5+)： TrueType/OpenType TT (.ttf)、 OpenType PS (.otf)、 WOFF (since Firefox 3.6)
•Google Chrome：TrueType/OpenType TT (.ttf)、OpenType PS (.otf)、WOFF since version 6
由上面可以得出：.eot + .ttf /.otf + svg + woff = 所有浏览器的完美支持。
@Font-face 让所有浏览器都兼容的方法：
有一个专门用于@font-face 的字体网站：http://www.fontsquirrel.com/fontface/generator
fontsquirrel 网站提供了一个免费的 @font-face Kit Generator工具，可以生成不同的字体格式，并且直接用css和html给出demo。使你可以直接引用到你的网站上。你可以直接使用 fontsquirrel 网站提供的一些字体，也可以上传你自己的字体还是用。
@font-face Kit Generator demo
http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html
@font-face Kit Generator demo
http://www.font2web.com/
@font-face demo
http://www.xunzou.com/demo/font-face/font-face.html