一个交互比较多的UI图里面可能会有很多小图标,一般可用sprites图将多个小图标弄成一张大图,或者其它的办法,各种方法的比较可参见博主的另外一篇博客使用css3新属性clip-path制作小图标,本文深入讨论使用icon-font的的制作方法:在PS里面导出svg,制作字体图标.这种方法既有sprites图不需要浏览器发多次请求的优点,也有使用clip-path/svg矢量无损的优点,并且支持IE6及以上. 使用sprites图可以自行用PS将多个小图标放至一张图: sprites图的缺点是不…

Icon font icon font 指的是用字体文件代替图片文件,来展示图标.特殊字体等元素的方法. 应用场景: iconfont的优缺点 大小能够自由地变化 颜色能够自由地改动 加入阴影效果 *IE6也能够支持 支持一些CSS3对文字的效果 字体文件比图片文件小非常多 由于是字体,所以仅仅能够显示纯色图片,不支持多种颜色的图片(缺点) 资源: 阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包括了淘宝图标库和阿里妈妈图标库. fontello 在线定…

一.Iconfont 1. 概述 在前端作业中,二十年前只有页面中铺满文字就算上线产品,现如今,不加点俏皮的“图标”会让页面显得很 Low 很 Low.   图标 在写这篇文章之前,我一直以为上图中的“图标”是一个个的图片组成,但学习总是给人新知,现在我知道了它们只是一种字体,类似于“宋体”.“楷体”这种.如果我们要使用它们,也只需要在 css 文件中使用 @font-face 引入这种字体即可.@font-face 是 css3 的一个语法,刚兴趣的可以自行阅读 @font-face 用法 .…

文本效果 关于文本效果,这里仅仅记录得到大多数浏览器支持的几个属性,分别是: text-overflow text-shadow word-break word-wrap text-overflow 介绍text-overflow之前先介绍一个white-space属性. white-space属性用来描述如何处理元素中的空白符,可以从父元素继承值. 可取值: normal  默认值.连续地空白符会被合并,包括换行符.文本填充行盒时,会根据需要自动换行. nowrap  连续的空白符(包括换行符…

1.介绍 @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使用,能让自己的页面也支持这样的自定义字体,一句话这些…

@font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉.随着 web 的急速发展,@font-face 价值越来越凸显,然后再次被纳入 CSS3 草案中.@font-face 是个什么东西,本文不做过多说明,不太清楚的童鞋可以看这里 http://www.w3schools.com/css/css3_fonts.asp.需要强调的是他的书写格式: @font-face { f…

如何让WordPress支持上传更多文件类型   可以在functions.php中这样写: 1 2 3 4 5 6 7 8 9 add_filter('upload_mimes', 'wpdit_filter_mime_types'); function wpdit_filter_mime_types($mimes) {     $mimes['ttf'] = 'font/ttf';     $mimes['woff'] = 'font/woff';     $mimes['svg'] = '…

一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ -webkit-name : value; /* WebKit */ name : value; /* 适应未来标准方式 */ } 二.媒体查询 1.使用媒体查询的3种方式 head部分 <link href="css.css" rel="stylesheet"…

http://w3help.org/zh-cn/causes/RF1001 http://blog.csdn.net/agileclipse/article/details/12450949 http://www.zhaozi.cn/html/fonts/  字体网 作者:陆远 标准参考 根据 CSS3 草案中的描述,'@font-face' 规则允许使用链接到需要时自动激活的字体.这使得用户可以使用在线的字体,而不仅仅拘泥于使用用户端系统内的字体.一套对字体的描述定义了字体资源的位置,可以是本…

几乎所有浏览器(包括最古老的IE6)也支持的网络字体@font-face的用法是: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern B…