CSS字体样式属性及文本外观属性
目录
一、字体样式属性
1、font-size设置字号
2、font-family设置字体
3、font-weight设置字体粗细
4、font-variant设置字体（字体变化）
5、font-style设置字体风格
6、font对字体样式进行综合设置
7、@font-face是CSS3的新增属性，用于定义服务器字体
二、文本外观属性
1、color定义文本颜色
2、letter-spacing定义字间距
3、word-spacing定义英文单词之间的间距
4、line-height设置行间距
5、text-transform用于控制英文字符的大小写
6、text-decoration设置文本的下划线，上划线，删除线等装饰效果
7、text-align设置文本内容水平对齐，相当于html中的align对齐属性。
8、text-indent设置首行文本的缩进。
9、white-space设置空白符的处理方式
10、text-shadow可以为页面中的文本添加阴影效果。
11、设置多个阴影叠加效果
12、background-color:背景颜色属性
一、字体样式属性
| 属性 | 作用 |
| font-size | 字号 |
| font-family | 字体 |
| font-weight | 字体粗细 |
| font-variant | 字体变化 |
| font-style | 字体风格 |
| font | 对字体样式进行综合设置 |
| @font-face | 服务器字体（CSS新增属性） |
1、font-size设置字号
该属性的值可以使用相对长度单位，也可以使用绝对长度单位。
| 相对长度单位 | 说明 |
| em | 相对于当前对象内文本的字体尺寸 |
| px | 像素，最常用，推荐使用 |
| 绝对长度单位 | 说明 |
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| pt | 点 |
2、font-family设置字体
网页中常用的字体有宋体、微软雅黑、黑体等
3、font-weight设置字体粗细
| 值 | 描述 |
| normal | 默认值。定义标准的字符。 |
| bold | 定义粗体字符。 |
| bolder | 定义更粗的字符。 |
| lighter | 定义更细的字符。 |
| 100~900（100的整数倍） | 定义由细到粗的字符。其中400等同于normal，700等同于bold，值越大字体越粗。 |
4、font-variant设置字体（字体变化）
一般用于定义小型大写字母，仅对英文字符有效。
- normal：默认值，浏览器会显示标准的字体;
- small-caps：浏览器会显示小型大写的字体，即所有的小写字母均会转换为大写;
5、font-style设置字体风格
可用于设置斜体、倾斜或正常字体
- normal：默认值，浏览器会显示标准的字体样式;
- italic：浏览器会显示斜体的字体样式;
- oblique：浏览器会显示倾斜的字体样式;
6、font对字体样式进行综合设置
7、@font-face是CSS3的新增属性，用于定义服务器字体
通过@font-face属性，开发者可以在用户计算机未安装字体时，使用任何喜欢的字体。
二、文本外观属性
1、color定义文本颜色
取值方式有以下三种：
- 预定义的颜色值，如red，green，blue等。
- 十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
- RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。
注意 : 如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
2、letter-spacing定义字间距
所谓字间距就是字符与字符之间的空白。
letter-spacing属性，其属性值可为不同单位的数值，允许使用负值，默认为normal。
3、word-spacing定义英文单词之间的间距
word-spacing属性用于定义英文单词之间的间距，对中文字符无效。和letter-spacing一样，其属性值可为不同单位的数值，允许使用负值，默认为normal。
4、line-height设置行间距
所谓行间距就是行与行之间的距离，即字符的垂直间距，一般称为行高。
line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px。
5、text-transform用于控制英文字符的大小写
其可用属性值如下：
- none：不转换（默认值）。
- capitalize：首字母大写。
- uppercase：全部字符转换为大写。
- lowercase：全部字符转换为小写。
6、text-decoration设置文本的下划线，上划线，删除线等装饰效果
其可用属性值如下：
- none：没有装饰（正常文本默认值）。
- underline：下画线。
- overline：上画线。
- line-through：删除线。
7、text-align设置文本内容水平对齐，相当于html中的align对齐属性。
其可用属性值如下：
- left：左对齐（默认值）
- right：右对齐。
- center：居中对齐。
注意：
1.text-align属性仅适用于块级元素，对行内元素无效。
2.如果需要对图像设置水平对齐，可以为图像添加一个父标签如 或，然后对父标签应用text-align属性，即可实现图像的水平对齐。
8、text-indent设置首行文本的缩进。
其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
注意 : text-indent属性仅适用于块级元素，对行内元素无效。
9、white-space设置空白符的处理方式
其属性值如下：
- normal：常规（默认值），文本中的空格、空行无效，满行（到达区域边界）后自动换行。
- pre：预格式化，按文档的书写格式保留空格、空行原样显示。
- nowrap：空格空行无效，强制文本不能换行，除非遇到换行标签
。内容超出元素的边界也不换行，若超出浏览器页面则会自动增加滚动条。
10、text-shadow可以为页面中的文本添加阴影效果。
- h-shadow用于设置水平阴影的距离。
- v-shadow用于设置垂直阴影的距离。
- blur用于设置模糊半径。
- color用于设置阴影颜色。
注意 ：阴影的水平或垂直距离参数可以设为负值，但阴影的模糊半径参数只能设置为正值，并且数值越大阴影向外模糊的范围也就越大。
11、设置多个阴影叠加效果
设置多组阴影参数，中间用逗号隔开即可
12、background-color:背景颜色属性
- 颜色值，例：red、yellow
- #十六进制色值，例：#ccc
- rgb(r,g,b)，例：rgb(30,0,0)
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！