Fontello:免费Web-font 图标大集合(font-face 图标集)

Fontello:免费Web-font 图标大集合(font-face 图标集)

当我知道这个网站的存在,我就知道我非常有必要将此分享给大家。Fontello,一个目测有200+个图标(数量还在增加)的 Web-font 图标市场,对于广大设计师、前端开发者来说就是宝藏。结合目前的 Web-font 趋势,Fontello 上的图标元素定能让你手中的网站大放异彩!

相关技术探讨

在以前的话,图标在网页设计中的运用都是通过图片的形式来的;使用图片其实有不少问题,比如说放大失真,增加过多http 请求数(即使使用 CSS Sprite 合并图片也不见得有多好)。最佳的方法应该是使用矢量图标。

CSS3有一个@font-face属性(不过据说 font-face 是CSS2 的产物),@font-face 的本意是用来在线加载自定义字体的(适合于英文字体),但后来这个 @font-face 被发扬光大,折腾出了个 Web-font ——就是将某些矢量图标做成字体文件,然后通过@font-face 这个在网页中使用。 Web-font 就能够很好解决图片式图标的问题。想要了解 @font-face 与 Web-font 请自行谷歌,在这里不再累赘——其实,Jeff 也不太了解 ╮(╯_╰)╭

Jeff 在目前折腾的原创主题 Aevework 上面已经成功使用上了,不过由于兼容性问题,本站 DeveWork.com 的主题暂时还不考虑使用。

Fontell 官方地址:http://fontello.com/

Fontello:免费Web-font 图标大集合(font-face 图标集)

Fontell 使用方法

使用方法

  1. 选择想要的图标,然后点击右上角的红色按钮下载
  2. 解压下载回来的 zip,把里面的文件上传到你的网站
  3. 下载回来的包有个 demo.html,这里可以看到相对应的类名(class name)。使用的话照着demo.html 用就可以了。

Fontell 高级使用技巧:在选择所需的图标,下载前可以点击Customize Names 来自定义选择器名称,这样就可以充分满足个性化需求。

Fontello:免费Web-font 图标大集合(font-face 图标集)

Fontell的 web-font 使用利弊问题

不过有好有坏, Web-font的兼容性问题实在是当前阻碍其发展的拦路虎。通过Jeff 本人实践以及参考相关资料,从利弊两个方面分析Web-font (font-face)的兼容性问题。

:矢量图标,可以完美支持 放大、改变颜色 等 CSS 层面的修饰而无失真

:不兼容某些浏览器(IE)、同比图片式图标,加载的文件容量(字体文件、CSS文件)更大;如果考虑hack,加载更多的CSS 文件

 

因前端造诣有限,本文涉及的相关前端知识可能会有误,如果有,还望您不吝赐教。

评分:
当前平均分 4.64 (89%) - 14 个投票
云左主机 广告
发表评论