建议遵循以下顺序: 1.布局定位属性: display / position / float / clear / visibility / overflow (建议 display 第 一个写,毕竟关系到 模式)
2.自身属性: width / height / margin / padding / border / background
3.文本属性: color / font / text-decoration / text-align / vertical-align / white- space / break-word 4.其他属性(CSS3): content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...
不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。
1. TureType(.ttf)格式 .ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、 Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;
2. OpenType(.otf)格式 .otf 字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有 Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;
3. web Open Font Format(.woff)格式 .woff 字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元 数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;
4. Embedded Open Type(.eot)格式 .eot 字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+
了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具 帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。
初始化css (css reset)让浏览器风格统—,把常用的初始化语句放入base.css里面。
我们把一些公共的样式放入common.css里面。
单位:
1.可以使用相对长度单位,也可以使用绝对长度单位。
2.相对长度单位比较常用,推荐使用像素单位 px ,绝对长度单位使用较少。
注意:
body {
font-size: 16px;
}
p{font-family: "微软雅黑";}
* 网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑· 可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个, 直到找到合适的字体。
p{font-family: Arial, "microsoft Yahei","微软雅黑";}
* 常用技巧: 1.各种字体之间必须使用英文状态下的逗号隔开。 2.中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英 文字体名必须位于中文字体名之前。 3.如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如 font-family: "TimesNew Roman" ;. 4.尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。
font-family: “\5FAE\8F6F1\96C5\9ED1";表示设置字体为“微软雅黑”。
提倡: 我们平时更喜欢用数字来表示加粗和不加粗。
小技巧: 平时我们很少给文字加斜体,反而喜欢给斜体标签(em, i)改为普通模式。
font属性用于对字体样式进行综合设置
本语法格式如下:
选择器{ font: font-style font-weight font-size/line-height font-family;}
注意:
1.有时在写页面的时候ui设计的图比较复杂,里面有很多字体在默认的字体类型是没有的,因此我们要 下载相应的字体包.ttf文件
1.使用 @font-face 引入字体包
1.像默认方式一样,使用 font-family 属性就行
图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http 请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行"缩放"因为图片放大和缩小会失真
字体图标本身是字体类型,体量小,加载快 可设置图标颜色、透明、阴影和旋转等属性,使用更灵活 但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等...本身体积更小,但携带的信 息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药...
假如图标是我们公司单独设计,那就需要第一步了,这个属于UI设计人员的工作,他们在 illustrator或 Sketch这类矢量图形软件里创建icon图标,比如下图:
当UI设计人员给我们svg文件的时候,我们需要转换成我们页面能使用的字体文件,而且需要生成的是兼 容性的适合各个浏览器的。
推荐网站: http://icomoon.io icomoon
字库 lcomoon成立于2011年,推出的第一个自定义图标字体生成器, 它允许用户选择他们所需要的图标,使它们成一字型。内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢.
推荐网站: http://www.iconfont.cn/
阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以 使用AI制作图标上传生成。一个字,免费,免费!
1. 下载图标
搜索图标 加入购物车 点进购物车 添加到项目 下载至本地
把下载文件里面的字体拎出来放在fonts字体文件夹并扔到根目录
3.声明字体
直接引入iconfont.css 或者打开复制@font-face部分(这里演示后者)
注意字体文件路径问题
4.使用字体
5.挑选相应图标并获取字体编码,应用于页面
Icon Font & SVG Icon Sets ❍ IcoMoonhttps://icomoon.io/1.下载图标
页面选择或者搜索自己想要的图标 点击下载