CSS字体属性用于设置HTML元素的字体内容。 CSS中有许多字体属性, 下面将进行讨论：
- 字体系列
- 字体样式
- 字体粗细
- 字体变体
- 字体大小
字体系列：
它用于设置HTML元素的字体类型。它具有多个字体名称作为备用系统。
语法如下：
font-family: "font family name";例子：
<!DOCTYPE html>
<html>
<head>
<title>font-family property</title>
<style>
.gfg {
font-family:"Times New Roman";
font-weight:bold;
font-size:40px;
color:#090;
text-align:center;
}
.geeks {
font-family:"Comic Sans MS", cursive, sans-serif;
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">lsbin</div>
<div class = "geeks">A computer science portal for geeks</div>
</body>
</html>输出如下：
字体样式：
用于指定HTML元素的字体样式。它可以是"正常, 斜体或倾斜"。
语法如下：
font-style: style name;例子：
<!DOCTYPE html>
<html>
<head>
<title>font-style property</title>
<style>
.gfg {
font-style:normal;
font-family:"Times New Roman";
font-weight:bold;
font-size:40px;
color:#090;
text-align:center;
}
.geeks {
font-style:italic;
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">lsbin</div>
<div class = "geeks">A computer science portal for geeks</div>
</body>
</html>输出如下：
字体粗细：
用于设置字体的粗体。其值可以是"正常, 粗体, 较浅, 较粗体"。
语法如下：
font-weight: font weight value;例子：
<!DOCTYPE html>
<html>
<head>
<title>font-weight property</title>
<style>
.gfg {
font-weight:bold;
font-style:normal;
font-family:"Times New Roman";
font-size:40px;
color:#090;
text-align:center;
}
.geeks {
font-weight:normal;
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">lsbin</div>
<div class = "geeks">A computer science portal for geeks</div>
</body>
</html>输出如下：
字体变体：
用于创建小写效果。它可以是"普通或小型股"。
语法如下：
font-variant: font variant value;例子：
<!DOCTYPE html>
<html>
<head>
<title>font-variant property</title>
<style>
.gfg {
font-variant: small-caps;
font-weight:bold;
font-family:"Times New Roman";
font-size:40px;
color:#090;
text-align:center;
}
.geeks {
font-variant:normal;
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">lsbin</div>
<div class = "geeks">A computer science portal for geeks</div>
</body>
</html>输出如下：
字体大小 ：
它用于设置HTML元素的字体大小。可以使用不同的方式设置字体大小, 例如"像素, 百分比, em或我们可以设置小, 大"等值。
语法如下：
font-size: font size value;例子：
<!DOCTYPE html>
<html>
<head>
<title>font-size property</title>
<style>
.gfg {
font-size:40px;
font-weight:bold;
font-family:"Times New Roman";
color:#090;
text-align:center;
}
.geeks {
font-size:1.2em;
text-align:center;
}
</style>
</head>
<body>
<div class = "gfg">lsbin</div>
<div class = "geeks">A computer science portal for geeks</div>
</body>
</html>输出如下：
