CSS3 icon font】的更多相关文章

CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.根据具体图标在大图上的位置,给背景定位. CSS Sprites加速的关键,不是降低质量,而是减少个数. 做成Sprites的很大的原因是图片流量大,想象一下,如果将一些小图片做成字体模式进行显示,会不会很神奇呢?随着CSS3对字体…
大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样.那么对于网站中用到的各种icon,我们就可以尝试使用font来实现, 为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求.那么我们就要将这些小图标输出为多种尺寸.颜色和文件格式,比如png8 alpha透明或者png8 index透明等. 使用字体来实现图标优势: 字体文…
http://ued.taobao.org/blog/?p=8579 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Retina屏的设备,苹果要求每个背景图都要以两种尺寸存(a.png和a@2x.png),这让设计师们增加了成本,因为他们每次都得出两份背景图标. 现在在web开发上,icon font技术的应用很广泛,它不仅在解决多分辨率显示问题上很有成效,而且在使用它的时候还能降低不少设计和开发成本. 那么它能不能应…
博文转载至 http://www.cocoachina.com/industry/20131111/7327.html 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Retina屏的设备,苹果要求每个背景图都要以两种尺寸存 “”   阅读器 icon font iOS 在开发阿里数据iOS版客户端的时候,由于项目进度很紧,项目里的所有图标都是用最平常的背景图片方案来实现.而为了要兼容普通屏与Retina屏的设备,苹果要…
一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的的制作方法:在PS里面导出svg,制作字体图标.这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上. 使用sprites图可以自行用PS将多个小图标放至一张图: sprites图的缺点是不…
现在在提起Icon Font,已经不是什么新鲜的词汇了,网上已经有很多介绍它的文章,并且很多网站也已经将它用到,本篇主要是将制作Icon Font的整个流程整理一下,并且加入了自己在制作中遇到的问题,使得大家可以在今后使用的时候可以很快上手并且避免这些问题. 一.首先要说的是,什么是Icon Font. 我认为,我们现在通常所指的Icon Font,是用字体文件取代图片文件,来展示图标.特殊字体等元素的方法. 二.知道了什么是Icon Font之后,我们要了解它能干什么,大家是怎么用的 这是一淘…
何为跨域访问,为什么会有跨域限制?一切还得从浏览器的同源策略说起. 同源策略:是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响,可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现. 浏览器的同源策略:限制了来自不同源的“document”或脚本,对当前“document”读取或设置某些属性.同源策略的存在,限制了“源”自A的脚本只能操作“同源”页面的DOM,“跨源”操作来源于B的页面将会被拒绝. 何为同源呢?“img.company.…
这周继续在弄hybird app 的 UI框架的重构,进行到了编写换肤功能的阶段,而在做换肤之前,我想应该先弄一套框架内置的图标. 而图标无非就是两种做法: 1.图片 使用图片很正常,但是有缺陷的. 1.众多的图标导致了增加了许多HTTP请求 PS:有人会说我把它们弄成一张大图不久行了,可是这样弄了之后,你连大小都无法改变.所以肯定还是一批小图片. 2.放大缩小失真 3.同张图片如果需要不同颜色,又得弄多一套出来. 2.字体 也就是这篇要说得Icon Font.做法就是讲你的图标做成字符,然后用…
Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 *IE6也能够支持 支持一些CSS3对文字的效果 字体文件比图片文件小非常多 由于是字体,所以仅仅能够显示纯色图片,不支持多种颜色的图片(缺点) 资源: 阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包括了淘宝图标库和阿里妈妈图标库. fontello 在线定…
字体图标Icon Font 前段时间研究怎样做字体图标,在网上查找诸多资料,诸多尝试,找到一套可以自己制作自己独立控制的制作流程,公司按照这套流程形成一套自己公司图标,本人目前所在公司已经在使用没有发现任何bug.下面是自己就个人研究和网上资料总结的字体图标相关知识和流程.看到这篇文章的同学,使用过程有什么问题可以互相学习,嘻嘻....…