CSS字体介绍和用法详细指南(代码实例)

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>

【CSS字体介绍和用法详细指南(代码实例)】输出如下：