HTMLCSS学习笔记（四）——CSS字体、文本属性

字体、文本属性

1、字体大小：{font-size:value;}

1. 属性值为数值型时，必须给属性值加单位，属性值为0时可以省略单位；

2. 为了减小系统间的字体显示差异，IE Netscape Mozilla的浏览器制作商于1999年召开会议，共同确定16px/ppi为标准字体大小默认值，即1em。默认情况下，1em=16px,0.75em=12px；

3. 使用绝对大小关键字：xx-small x-small small medium large x-large xx-large

4. 常用单位：px pt em % rem vw vh

5. pt (point，磅)：是一个物理长度单位，指的是72分之一英寸。
   px (pixel，像素)：是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPI(Dots Per Inch，每英寸像素数)，在扫描打印时一般都有DPI可选。Windows系统默认是96dpi，Apple系统默认是72dpi。
   em(相对长度单位，相对于当前对象内文本的字体尺寸)：是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。

6. 浏览器最小字号：谷歌12px、火狐9px

2、文本颜色：{color:颜色值;}

1. 颜色值为颜色英文单词：color:red;
2. 颜色值为RGB值：color:rgb(255,255,255);
3. 颜色值为十六进制：color:#58bc58;
   注意：
   RGB为三原色，分别表示red、green、blue，取值范围为0~255。
   十六进制颜色值：由0~9 和 A到F组成，可使用小写英文。
   rgba()颜色+透明

3、字体类型：{font-family:字体1，字体2，字体3；}
浏览器首先会寻找字体1、如存在就使用改字体来显示内容，如在字体1不存在的情况下，则会寻找字体2，如字体2也不存在，按字体3显示内容，如果字体3 也不存在；则按系统默认字体显示；
注意：

1. 当字体是中文字体时，需加双引号；
2. 当英文字体中有空格时，需加双引号如（“Times New Roman”）；
3. 当英文字体只有一个单词组成是不加双引号；如：（Arial）；

4、文字加粗：{font-weight:bolder(更粗的)/bold（加粗）/normal（常规）/100—900;}
在css规范中，把字体的粗细分为9个等级，分别为100——900。
注意：
九个等级均为整百，即100、200…800、900。
100——400的字体为一般粗细，看不出明显变化效果；
500为常规字体；
600——900为加粗字体，逐级加粗；
bold为加粗，bolder为更粗。一般使用bold设置字体加粗。

5、字体风格：{font-style：normal/italic/oblique/inherit;}

1. normal：默认值。浏览器显示一个标准的字体样式。
2. italic：浏览器会显示一个斜体的字体样式。
3. oblique：浏览器会显示一个斜体的字体样式。
4. inherit：规定应该从父元素继承字体样式。
   注意：italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体 的字体应该使用Oblique属性值来实现倾斜的文字效果。

6、水平对齐方式：{text-align:left/right/center/justify;}

1. left：左对齐
2. right：右对齐
3. center：居中对齐
4. justify：两端对齐，对纯数字、纯字母不起作用，最后一行无效

7、文字行高 {line-height:normal/value;}

1. normal 默认。设置合理的行间距。
2. number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
3. length 设置固定的行间距。
4. % 基于当前字体尺寸的百分比行间距。
5. inherit 规定应该从父元素继承 line-height 属性的值。

注意：

1. 当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐；
2. 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直中齐以上任意位置的定位；
3. 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直中齐以下任意位置的定位。（IE6及以下版本存在浏览器兼容问题）

8、font属性简写
说明:font的属性值应按以下次序书写(各个属性之间用空格隔开)
顺序: font-style font-weight font-size / line-height font-family
（1）简写时 , font-size和line-height只能通过斜杠/组成一个值，不能分开写。
（2）顺序不能改变 ,这种简写法只有在同时指定font-size和font-family属性时才起作用,而且,你没有设定font-weight , font-style , 他们会使用缺省值（默认值）。

9、文本修饰{text-decoration:none/underline/overline/line-through}

1. none 默认。定义标准的文本。
2. underline 定义文本下的一条线。
3. overline 定义文本上的一条线。
4. line-through 定义穿过文本下的一条线。

10、首行缩进：{text-indent:value;}

1. text-indent可以取负值；
2. text-indent属性只对第一行起作用；

11、字间距{letter-spacing:value;}（中文）
控制文字和文字之间的间距。

12、字间距{word-spacing:value;}（单词）
控制单词之间的间距。