CSS - 字体属性及文本属性

一、 字体属性

属性含义说明
font-size大小常用单位 px，默认为16px，
font-family字体多个字体时要用“，”隔开，两个单词以上字体名要用引号
font-weight粗细正常字体400，加粗700，没有单位
font-style样式italic 为 斜体，normal 为正常字体
font简写顺序不能更改，大小和字体不能省略

1. 字体 font-family

font-familyCSS属性允许您设置文本内容的字体系列名称，字体使用的优先级列表。

font-family属性可以包含多个字体名称作为后备字体，字体之间用 “，”隔开

如果字体系列的名称超过一个单词，它必须用引号引起来，像"Times New Roman"

1
2
3
p {
    font-family: "Microsoft YoHi", Arial， Helvetica；
}

2. 字体大小 font-size

font-size属性设置元素文本内容的字体大小，在浏览器中默认的文字大小是16px。

标题标签的文字大小需要单独指定

单位：

  • px（像素）：最常用的大小单位
  • em：父元素的字体大小单位
    • 如果父元素设置字体为 20px，则 1em = 20px， 2em = 40px
    • 如果父元素没有设置字体大小，则 1em = 16px， 2em = 32px
1
2
3
4
5
6
h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

推荐使用百分比设置字体大小

font-size将body的设置为62.5%（即默认16px的62.5％），等于10px或0.625em

1
2
3
4
5
6
body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.6em;    /* 1.6em = 16px */
}

3. 字体粗细 font-weight

font-weight属性指定字体的粗细或粗体。

参数：

参数说明
normal（默认）正常字体，相当于number为400
bold粗体，相当于number为700，也相当于 <b>标签的作用
bolder特粗体
lighter细体
number100\200\300\400\500\600\700\800\900
1
2
3
p {
	font-weight: 700;
}

4. 字体样式 font-style

通过font-style属性设置元素的文本内容的字体样式。

参数说明
normal正常字体
italic斜体（斜体版本的字体）
oblique斜体（正常版本的倾斜字体）
1
2
3
4
5
6
7
8
9
p.one {
    font-style: normal;
}
p.two {
    font-style: italic;
}
p.three {
    font-style: oblique;
}

5. 字体复合属性

语法：

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

语法格式为固定顺序，不能更改

不需要设置的属性可以不写，但是 font-size 和 font-family 属性必须保留，否则 font 失效

常规写法：

1
2
3
4
5
6
div {
	font-size: 16px;
	font-family: "microsoft yahei";
	font-style: italic;
	font-weight: 700;
}

复合写法：

1
div {font: italic 700 16px "microsoft yahei"; }

二、 文本属性

属性表示说明
color文本颜色常用16进制值
text-align文本对齐设置水平对齐方式
text-indent文本缩进缩进2个字的距离：2em、32px（默认字体大小时）
text-decoration文本修饰underline 添加下划线，取消下划线 none
line-height行高控制两行之间的距离

1. 字体颜色 color

color 三种属性值：

  1. 预定义的颜色值：red、green、blue等
  2. 十六进制： #ff0000、#29D794等
  3. RGB代码： rgb(255,255,255) 或 rgb（100%， 100%， 0%）
1
2
3
4
5
6
7
8
9
h1 {
    color: #ff0000;
}
p {
    color: green;
}
div {
	color: rgb(0, 255, 0)
}

2. 文本对齐 text-align

text-align 属性用于设置元素内文本的 水平 对齐方式。

属性值：

属性值说明
left左对齐
right右对齐
center居中
1
2
3
h1 {
    text-align: center;
}

3. 装饰文本 text-decoration

text-decoration ：属性规定添加到文本的装饰，如下划线、删除线等等。

属性值：

属性值描述
none（默认）没有装饰线
underline下划线，标签 <a> 自带下划线
overline上划线
line-through删除线
1
2
3
4
5
6
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

4. 字体缩进 text-indent

text-indent ： 属性用于设置元素的 首行 文本 的 缩进

em 是一个相对单位，就是当前元素 1个 文字大小，如果当前元素没有设置，则会按照父元素的 1个文字大小。

1
2
3
4
5
6
7
8
9
div {
    text-indent: 32px;
}
div {
    text-indent: 6.25%;
}
div {
    text-indent: 2em;
}

5. 行间距 line-height

line-height ： 属性用于设置行间的距离（行高）。

行高 = 上间距 + 下间距 + 文本高度

1
2
3
p {
    line-height: 20px;
}

6. 文字垂直居中

要想文字垂直居中，只需要 <mark> 文字的行高（line-height）等于盒子的行高 </mark> 即可

::: details

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		a {
			display: block;
			width: 230px;
			height: 40px;
			background-color: #bbb;
			text-decoration: none;
			line-height: 40px;
		}
	</style>
</head>

<body>
	<div>
		<a href="#">文职垂直居中</a>
	</div>
</body>

</html>

:::