一.css字体样式

*CSS属性书写顺序(重点)

建议遵循以下顺序: 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.字体属性

1.1 font-size:字号

单位:

1.可以使用相对长度单位，也可以使用绝对长度单位。

2.相对长度单位比较常用，推荐使用像素单位 px ，绝对长度单位使用较少。

 注意：

• .文字大小单位基本用 px ，其他单位很少使用
• 谷歌浏览器默认的文字大小为 16p
• 但是不同浏览器可能默认显示的字号大小不一致，我们尽星给一个明确值大小，不要默 认大小。一般给 body 指定整个页面文字的大小

  body {
  font-size: 16px;
  }

1.2 font-family:字体

• 作用: font-family属性用于设置哪─种字体。

p{font-family: "微软雅黑";}

* 网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑· 可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个， 直到找到合适的字体。

p{font-family: Arial, "microsoft Yahei"，"微软雅黑";}

* 常用技巧: 1．各种字体之间必须使用英文状态下的逗号隔开。 2．中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英 文字体名必须位于中文字体名之前。 3．如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如 font-family: "TimesNew Roman" ;. 4．尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

1.3 Unicode字体

• 为什么使用Unicode字体：在CSS中设置字体名称，直接写中文是可以的。但是在文件编码(GB2312、UTF-8等）不匹配 时会产生乱码的错误。 xp系统不支持 类似微软雅黑的中文。
• 解决
• 方案一：你可以使用英文来替代。比如 font-family : "Aicrosoft Yahei" 。
• 方案二：在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。

   font-family: “\5FAE\8F6F1\96C5\9ED1";表示设置字体为“微软雅黑”。
  

  

   1.4 font-weight:字体粗细

• 在html中如何将字体加粗我们可以用标签来实现。
• 使用 b 和 strong 标签是文本加粗。
• 可以使用CSS来实现，但是CSS是没有语义的。
• 

 提倡: 我们平时更喜欢用数字来表示加粗和不加粗。

1.5 font-style:字体风格

• 在html中如何将字体倾斜我们可以用标签来实现
• 字体倾斜除了用 i 和 em 标签
• 可以使用CSS来实现，但是CSS是没有语义的
• font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下:
• 

 小技巧: 平时我们很少给文字加斜体，反而喜欢给斜体标签(em， i）改为普通模式。

1.6 font:综合设置字体样式(重点)

font属性用于对字体样式进行综合设置

本语法格式如下:

选择器{ font: font-style font-weight font-size/line-height font-family;}

注意：

• 使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
• 其中不需要设置的属性可以省略（取默认值)，但必须保留 font-size 和 font-family 属性， 否则 font 属性将不起作用。
• 

 2自定义字体

2.1下载字体包

1.有时在写页面的时候ui设计的图比较复杂，里面有很多字体在默认的字体类型是没有的，因此我们要 下载相应的字体包.ttf文件

2.2 字体包引入

1.使用 @font-face 引入字体包

 

2.3 字体使用

1.像默认方式一样，使用 font-family 属性就行

3. 字体图标

图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http 请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行"缩放"因为图片放大和缩小会失真

3.1 字体图标优点

字体图标本身是字体类型，体量小，加载快 可设置图标颜色、透明、阴影和旋转等属性，使用更灵活 但是本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果等等...本身体积更小，但携带的信 息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药...

3.2 字体图标使用流程

 3.3 设计字体图标

假如图标是我们公司单独设计，那就需要第一步了，这个属于UI设计人员的工作，他们在 illustrator或 Sketch这类矢量图形软件里创建icon图标，比如下图:

 之后保存为 svg 格式，然后给我们前端人员就好了。 其实第一步，我们不需要关心，只需要给我们这些图标就可以了，如果图标是大众的，网上本来就有 的，可以直接跳过第一步，进入第三步。

3.4 上传生成字体包

当UI设计人员给我们svg文件的时候，我们需要转换成我们页面能使用的字体文件，而且需要生成的是兼 容性的适合各个浏览器的。

推荐网站: http://icomoon.io icomoon

字库 lcomoon成立于2011年，推出的第一个自定义图标字体生成器, 它允许用户选择他们所需要的图标，使它们成一字型。内容种类繁多，非常全面，唯一的遗憾是国外服务器，打开网速较慢.

 推荐网站: http://www.iconfont.cn/

阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以 使用AI制作图标上传生成。一个字，免费，免费!

 

 

3.5 字体图标的使用方法（阿里巴巴矢量图标库）

1. 下载图标

搜索图标 加入购物车 点进购物车 添加到项目 下载至本地

 引入字体到html

把下载文件里面的字体拎出来放在fonts字体文件夹并扔到根目录

3.声明字体

直接引入iconfont.css 或者打开复制@font-face部分（这里演示后者）

 注意字体文件路径问题

 

4.使用字体 

 5.挑选相应图标并获取字体编码，应用于页面

 3.6 字体图标的使用方法（icomoon字库）

Icon Font & SVG Icon Sets ❍ IcoMoonhttps://icomoon.io/1.下载图标

页面选择或者搜索自己想要的图标 点击下载