【CSS 小结笔记之图标字体（IconFont）】的更多相关文章

CSS 小结笔记之图标字体（IconFont）

本篇主要介绍一种非常好用的图标大法——图标字体(IconFont). 什么是图标字体?顾名思义,它是一种字体,只不过这个字体显示的并不是具体的文字之类的,而是各种图标. 网站上经常会用到各种图标,之前网页上使用图标主要采用精灵图(背景位置+背景缩放)来实现,但是这样使用起来有许多不便之处,一方面缩放处理起来比较麻烦,一方面如果要改动一些图标就需要去找到设计人员重新设计,然后重新添加,这个过程非常不友好. 图标字体可以非常便捷的去解决以上问题,使用起来也非常简单.因为他是字体,所以可以当成字体来引…

CSS高级技巧 图标字体ICONFONT的使用方法视频

图标字体  iconfont 这是一种字体,它跟svg 有很大 相似点   它是矢量的,放大缩小不失真的.很且很小. 我们把它成字看来. 字体 在 从ie4就开始支持的.  兼容性很好 唯一麻烦的地方,就是制作麻烦. 越来越的网站开始运用这个图标字体. 一些地方,我们就不用精灵图片,直接用图标字体. 图标字体的使用 自己制作比较麻烦,我们一般是网上直接下载,因此,要使用iconfont字体一共分为三步: 1. 先从网上下载字体.     经常使用的两个网站: icomoon.io http://…

图标字体(IconFont)制作

图标字体(IconFont)介绍 图标字体(IconFont)现在越来越被广泛使用,大大提高了网页的多样化,解决了视网膜屏幕失真的问题. 据说微软从IE4开始支持的这个私有方法(@font-face),后来W3在CSS2中也引入这个方法,但是后来CSS2.1又被删除了,真是遗憾.直到CSS3,又一次引入,这真是个好消息. 详细见:http://www.w3.org/TR/css3-fonts/. 不过经常会被问到,移动端用没问题,PC上IE可以了,我可以负责任的说:当然可以.原因上面说了,@fo…

CSS 小结笔记之解决flex布局边框对不齐

在使用flex 进行伸缩布局的时候,经常会给子盒子设置边框,这时经常会出现上下边框对不齐的情况.本篇文章来探讨并解决这个问题. 具体出现的问题如下图所示 具体代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi…

CSS 小结笔记之浮动

在css中float是一个非常好用的属性,float最基本用法是用来做文字环绕型的样式的. 基本用法:float:left | right 例如 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia…

css与jquery、图标字体

*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没有用了就 *)对于水平方向的居中布局,一般可以在父元素的css中添加 text-align 就可以实现居中,而不需要通过设置这个元素的 margin 等. *)设置控件的透明度也可以使用opacity这个属性来设置 *)jquery 使用cookie必须导入 <script src=" htt…

CSS学习笔记----CSS3自定义字体图标

响应式网页字体图标 作者:大漠 日期:2014-01-28 点击:3220 @font-face Responsive 本文由大漠根据Jason的<Responsive Webfont Icons>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文,需注明英文出处:http://webstandardssherpa.com/reviews/responsive-webfont-icons,以及作者相关信息 ——作者:Jason ——译者:大漠 响应式…

图标字体iconfont的使用

什么是iconfont? iconfont就是字面上的意思,叫做"字体图标",将一套图标集以字体文件的形式封装,并通过 CSS 的 @font-face 作为 Web Font 调用. iconfont的好处是什么 众所周知,以往我们图片大多是用png.但是png在使用过程中却有众多不变之处,譬如每个图片都是一个请求,当网页图片较多时,会比较影响加载的速度,不同分辨率的手机,为了响应式的展示页面,可能加有2倍图.3倍图等,使需要加载的资源变多,影响网页的性能. 那么iconfont的好…

css读书笔记4：字体和文本

字体属性网页中的字体有3个来源:1.用户机器中安装的字体:2.保存在第三方网站上的字体.可以使用link标签把它们链接到页面中:3.保存在子集的web服务器上的字体.可以使用@font-face规则随网页一起发送给浏览器. 与字体样式相关的6个属性:font-family(字体家族.一般对body元素使用,让整个网页使用同样的字体.一般需要多列出几种后备字体,以防前面的字体无效.)font-size(字体大小.)font-style(字体样式.设定字体是斜体还是整正体.)font-weight(…

CSS 小结笔记之em

1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的强大之处 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=…