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

2021年4月6日19:31:27 发表评论 698 次浏览

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>

输出如下:

字体大小

木子山

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: