范仁义css3课程---5、字体
一、总结
一句话总结：
css的字体讲的有点多，但是大家最开始只需要记住最基本的使用，熟能生巧之后，也就会比较好的掌握这些内容
1、字体大小最基本使用？
font-size:16px;
2、css中如何设置字体倾斜？
p.italic {font-style:italic}
二、字体
别看内容一大堆，真正需要本节课掌握的也就是总结里面的一点点内容，其它内容遇到的算比较少，遇到了不熟就查手册或者百度...
1、字体类型：
font-family:字体1,字体2,字体3;
常用写法： font-family:"微软雅黑",Arial;
注：
a) 多个字体之间用逗号分隔；
b) 中文字体要放在双引号中，英文字体由多个单词组成时也要加双引号；
c) 浏览器优先识别字体1，如果找不到字体1，识别字体2，如果都找不到，显示浏览器默认字体。
下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。
body{font-family:"宋体";}
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。
（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
2、字体大小：
font-size:数值+单位;
属性值
| 值 | 描述 |
|---|---|
|
把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。 |
| smaller | 把 font-size 设置为比父元素更小的尺寸。 |
| larger | 把 font-size 设置为比父元素更大的尺寸。 |
| length | 把 font-size 设置为一个固定的值。 |
| % | 把 font-size 设置为基于父元素的一个百分比值。 |
| inherit | 规定应该从父元素继承字体尺寸。 |
注：
a）浏览器默认字体大小为16px；
b) font-size:medium;等价于 font-size:16px;
可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：
body{font-size:12px;color:#666}
注：字体的话现在只用掌握最基本的使用，就是 设置字体为多少px，比如 font-size:16px; 其它的属性了解即可，用到的比较少，后面移动端开发可能会用到em，rem这样的单位，后面讲
3、字体加粗：
font-weight 属性设置文本的粗细
font-weight:normal(常规字体)|bold(加粗)|bolder(加粗)|100-500(常规字体)|600-900（加粗字体）;
属性值
| 值 | 描述 |
|---|---|
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
|
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。 |
| inherit | 规定应该从父元素继承字体的粗细。 |
100 ~ 900 整百（400=normal，700=bold）
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
4、字体倾斜：
font-style属性指定文本的字体样式。
font-style:normal(常规字体)|italic(倾斜)|oblique(倾斜);
属性值
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
实例
p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}
italic 和 oblique 的区别
一种字体有粗体、斜体、下划线、删除线等诸多属性。
但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用 italic，就没有效果了~
这时候你就要用 oblique，可以理解成 italic 是使用文字的斜体，oblique 是让没有斜体属性的文字倾斜！
另 CSS2.0 上边的解释：italic 和 oblique 都是向右倾斜的文字, 但区别在于 italic 是指斜体字，而 oblique 是倾斜的文字，对于没有斜体的字体应该使用 oblique 属性值来实现倾斜的文字效果。
5、文本是否大写：
font-variant 属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小
font-variant 属性主要用于定义小型大写字母文本
属性值
| 值 | 描述 |
|---|---|
| normal | 默认值。浏览器会显示一个标准的字体。 |
| small-caps | 浏览器会显示小型大写字母的字体。 |
| inherit | 规定应该从父元素继承 font-variant 属性的值。 |
font-variant:normal(常规字体)|small-caps(小型的大写字母字体);
注：此属性主要应用于英文
6、字体颜色：
Color属性指定文本的颜色。
color:颜色值;
属性值
| 值 | 描述 |
|---|---|
| color_name | 规定颜色值为颜色名称的颜色（比如 red）。 |
| hex_number | 规定颜色值为十六进制值的颜色（比如 #ff0000）。 |
| rgb_number | 规定颜色值为 rgb 代码的颜色（比如 rgb(255,0,0)）。 |
| inherit | 规定应该从父元素继承颜色。 |
颜色值的几种设置方式：
a) 十六进制写法 #000000 #000 黑色 #fff 白色 #f00 红色
b) rgb写法 rgb(0,0,0) 黑色 rgb(255,255,255) 白色
c) rgba写法 a代表透明度，取值范围0-1 rgba(0,0,0,0.6)
d) 颜色单词 red(红色) black(黑色) white(白色) green(绿色) yellow(黄色) gray(灰色) pink(粉色) blue(蓝色)
7、font简写方式：
属性定义及使用说明
font 简写属性在一个声明中设置所有字体属性。
可设置的属性是（按顺序）： "font-style font-variant font-weight font-size/line-height font-family"
font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
注意： line - height属性设置行与行之间的空间。
font:italic bolder 12px "微软雅黑",Arial;
注：使用简写方式时，font-size和font-family不可与其他属性互换位置，也不能分开写
语法：font：字体大小/行高 字体;（字体要在最后）
font:12px/1.5 "微软雅黑",Arial; （字体大小为12px,行高是字体大小的1.5倍）
注：将font-size和line-height结合在一起时，用/来表示，/前表示字体大小，/后表示字体行高，当行高不加单位时，表示行高为字体大小的多少倍
注：只有在同时指定font-size和font-family时才能使用/这种写法