font属性是什么意思，font-family-style-weight-size属性用法及注意事项

font-属性是CSS字体样式，通常在网页中使用的还是比较多的，它可以控制整个网页中字体的类型、风格、大小、粗细等等，很多刚开始学习的时候，可能会很快忘记这些属性的用法及区别，它们有些比较相似，为了让大家更好的理解，我们将每个属性进行实现一边，结合案例进行解剖，font-字体样式还是很好学的，基本没有什么难点，但是达到灵活运用，还需要多加练习，下面我们对CSS的字体样式进行讲解。

属性1：Font-family

Font-family是为了给网页字体设置类型字体。

属性值：

family-name generic（通用）-family :用于某个元素的字体族名称或/及类族名称的一个优先表。默认值：取决于浏览器。

inherit 规定应该从父元素继承字体系列。

通常使用通用字体类型为："serif"、"sans-serif"、"cursive"、"fantasy"、"monospace"；

代码实现：

<!DOCTYPE html>
<html>
<head>
         <title>css教程</title>
         <style type="text/css">
              div{
                     font-family:monospace,fantasy,cursive,sans-serif,serif;
              }       
         </style>
</head>
<body>
     <div>
     <p>CSS字体类型</p> 
     <p>CSS字体类型</p> 
     <p>CSS字体类型</p> 
     <p>CSS字体类型</p> 
     </div>
</body>
</html>

效果实现：

注意事项：

1 多个字体排列，从第一个开始使用，如果第一个没有则向后使用第二种类型字体，如果都没有，则默认使用浏览器字体。

2 为什么有些需要双引号或者单引号？因为有些字体类型命名是分开的，而这如果想要识别，一般加上单引号或者双引号都可以

属性2：font-style

font-style是设置字体风格，主要是斜体样式。

font-style 的值

normal          默认值。浏览器显示一个标准的字体样式。
italic               浏览器会显示一个斜体的字体样式。
oblique          浏览器会显示一个倾斜的字体样式。
inherit           规定应该从父元素继承字体样式。

代码实现：

<!DOCTYPE html>
<html>
<head>
                        <title>css教程</title>
                        <style type="text/css">
 
                             .l1{
              font-style: italic;
                             }
                             .l2{
                                 font-style: oblique;
                             }
                             .l3{
                               font-style: normal;
                             }
                        </style>
</head>
<body>
     <div>
     <p class="l1">font-style字体类型1</p>    
     <p class="l2">font-style字体类型2</p>    
     <p class="l3">font-style字体类型3</p>    
     </div>
</body>
</html>

实现效果

注意事项：

1 italic 和 oblique是一样的字体样式

属性3：font-variant

font-variant 可以设定小型大写字母。

font-variant 的值：

normal          默认值。浏览器会显示一个标准的字体。
small-caps    浏览器会显示小型大写字母的字体。
inherit           规定应该从父元素继承 font-variant 属性的值。

代码实现过程

<!DOCTYPE html>
<html>
<head>
                        <title>css教程</title>
                        <style type="text/css">
 
                             .l1{
              font-variant:small-caps;
                             }
                        </style>
</head>
<body>
     <div>
     <p class="l1">font-variant字体类型1</p>         
     </div>
</body>
</html>

实现效果

注意事项：

这种字体风格只是看起来更加的不一般，并不是我们所说的大小写字母。

属性4：font-weight

font-weight是用于设置字体的粗细情况的。

font-weight的值：

normal          默认值。定义标准的字符。
bold                定义粗体字符。
bolder            定义更粗的字符。
lighter           定义更细的字符。
100
200
300
400
500
600
700
800
900
定义由粗到细的字符。400 等同于 normal，而 700 等同于 bold。
inherit           规定应该从父元素继承字体的粗细。

代码实现过程：

<!DOCTYPE html>
<html>
<head>
                        <title>css教程</title>
                        <style type="text/css">
 
                             .l1{
              font-weight: bold;
                             }
                             .l2{
                                 font-weight: bolder;
                             }
                             .l3{
                                font-weight: lighter;
                             }
        
         .l4{
            font-weight: 900;
         }
         .l5{
            font-weight: 100;
         }
                        </style>
</head>
<body>
     <div>
     <p class="l1">font-weight字体类型1</p>
     <p class="l2">font-weight字体类型2</p>
     <p class="l3">font-weight字体类型3</p>
     <p class="l4">font-weight字体类型4</p>
     <p class="l5">font-weight字体类型5</p>
     </div>
</body>
</html>

实现效果