非零基础自学前端最后一遍一 HTML+CSS 7 CSS属性-字体 7.6 font缩写属性的语法规则

末蓝、 2024-03-25 14:10 45阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  7 CSS属性-字体
         *   *  7.6 font缩写属性的语法规则
             *   *  7.6.1 font

![在这里插入图片描述][6d4459e3c76a4e48bf9a17ae25f1d3d7.png_pic_center]

#### 一 HTML+CSS ####

#### 7 CSS属性-字体 ####

##### 7.6 font缩写属性的语法规则 #####

###### 7.6.1 font ######

*  font是一个缩写属性
    
     *  font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写;
     *  font-style font-variant font-weight font-size/line-height font-family
 *  规则:
    
     *  font-style、font-variant、font-weight可以随意调换顺序，也可以省略
     *  /line-height可以省略，如果不省略，必须跟在font-size后面
     *  font-size、font-family不可以调换顺序，不可以省略

![在这里插入图片描述][7575b8257fcc4441964c6a58a8438e2a.png_pic_center]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .box {
          
          /* 关于字体的属性 */
          font-size: 30px;
          font-weight: 700;
          font-variant: small-caps;
          font-style: italic;
          font-family: serif;
          line-height: 30px;
        }
      </style>
    </head>
    
    <body>
      <div class="box">我是div元素</div>
    </body>
    
    </html>

渲染效果

![在这里插入图片描述][06b671332bb54566949ee862b617493b.png_pic_center]

使用缩写属性

![在这里插入图片描述][0f0202fb8cbc4912ab0c730a7aadb61b.png_pic_center]

效果一样

[6d4459e3c76a4e48bf9a17ae25f1d3d7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/acb51ba5c2d54c16906726fefd378ce6.png
[7575b8257fcc4441964c6a58a8438e2a.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/4b6bab15cd9a4baf8b040fc01662b65b.png
[06b671332bb54566949ee862b617493b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/95aff767b8e4477cbbffa81e44106e08.png
[0f0202fb8cbc4912ab0c730a7aadb61b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b44e4344b729468a8a26f52b4abf7be1.png