（1）文字大小
属性名： font-size
作用：用于控制字体的大小。
使用语法：
div { font-size: /* 设置字体的大小 */; }
这里我们直接使用一个案例来加深理解：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.22.css"> </head> <body> <div>这是一段将要加粗的文字</div> </body> </html>
CSS代码：
/* 将div标签中的文字大小改为40px */ div { font-size: 40px; }
注意：
1. Chrome 浏览器支持的最小文字为12px ，默认的文字大小为16px ，并且0px 会自动
消失。
2. 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
3. 通常以给 body 设置font-size 属性，这样body 中的其他元素就都可以继承了。
这样我们就了解了如何改变文字的大小。
（2）字体族
属性名： font-family
作用：用于控制字体类型。
使用语法：
div { font-family: /* 添加文字类型 */ }
我们直接使用一个案例来加深理解：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.22.css"> </head> <body> <div>这是一段将要修改文字类型的文字</div> </body> </html>
CSS代码：
/* 将文字类型改为华文彩云，如果修改失败，则改为微软雅黑 */ div { font-family: "华文彩云","微软雅黑",sans-serif }
注意：
1. 使用字体的英文名字兼容性会更好，具体的英文名可以自行查询，或在电脑的设置里
去寻找。
2. 如果字体名包含空格，必须使用引号包裹起来。
3. 可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面
的，且通常在最后写上serif （衬线字体）或sans-serif （非衬线字体）。
4. windows 系统中，默认的字体就是微软雅黑。
这样我们就了解了如何改变文字的类型。
（3）字体风格
属性名： font-style
作用：用于控制字体是否为斜体。
常用值：
1. normal ：正常（默认值）
2. italic ：斜体（使用字体自带的斜体效果）
3. oblique ：斜体（强制倾斜产生的斜体效果）
使用语法：
div { font-style: /* 设置文字是否倾斜 */; }
我们直接使用一个案例来加深理解：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.22.css"> </head> <body> <div>这是一段将要倾斜的文字</div> </body> </html>
CSS代码：
/* 将文字设置为倾斜 */ div { font-style: italic; }
注：实现斜体时，更推荐使用italic 。
这样我们就了解了如何使文字倾斜。
（4）字体粗细
属性名： font-weight
作用：用于控制字体的粗细。
常用值：
1. lighter ：细
2. normal ： 正常
3. bold ：粗
4. bolder ：很粗 （多数字体不支持）-------------------------------------------------------------------------------------------------------------------------
数值：
1. 100~1000 且无单位，数值越大，字体越粗 （或一样粗，具体得看字体设计时的
精确程度）。2. 100~300 等同于lighter ， 400~500 等同于normal ， 600 及以上等同于
bold 。
使用语法：
/* 使用特定表示 */ div { font-weight: bold; } /* 使用数值 */ div { font-weight: 600; }
我们直接使用一个案例来加深理解：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.22.css"> </head> <body> <div>这是一段将要加粗的文字</div> </body> </html>
CSS代码：
/* 将文字设置为粗体 */ div { font-weight: bold; }
这样我们就了解了如何加粗文字。
（5）字体复合写法
属性名： font
作用：将上述所有字体相关的属性复合在一起编写。
编写规则：
1. 字体大小、字体族必须都写上。
2. 字体族必须是最后一位、字体大小必须是倒数第二位。
3. 各个属性间用空格隔开。
感觉还是没有太懂，那我们使用一个案例来使你更好的理解：
html代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./2024.4.22.css"> </head> <body> <div>这是一段将要修改的文字</div> </body> </html>
CSS代码：
/* 将文字设置为粗体，大小40px 文字类型为微软雅黑，如果设置失败则设置为华文彩云 */ div { font: bold italic 40px "微软雅黑","华文彩云",sans-serif; }
注：实际开发中更推荐复合写法，但这也不是绝对的，比如只想设置字体大小，那就直接用font-size属性。
这样我们就了解了如何将文字的属性复合的写在一起了。
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)