字体其他样式（字体二） 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字体其他样式</title>
        <style type="text/css">
            .p1{
                color: #FF0000;
                font-size: 30px;
                font-family: 微软雅黑;
                /*font-style可以设置文字的斜体
                  可选值
                        normal 默认值，文字正常显示
                        italic 文字会以斜体显示
                        oblique 文字会以倾斜方式显示
                    -  大部分浏览器都不会对倾斜和斜体做区分
                        设置italic和oblique效果是一样的
                        一般只会使用italic                  
                */
                font-style: italic;
                
                /*
                  font-weight可以设置文本的加粗效果
                        normal  默认值 文字正常显示
                        bold 文字加粗显示
                    */
                   font-weight: bold;
                   /*
                  该样式也可以指定100-900之间9个值
                        但由于用户的就安吉没有这么多级别的字体，所以想达到效果
                        也就是200可能比100粗，300可能比200粗，但是也可能一样                
                */
               font-weight: 900;
                /*
                  font-variant可以用来设置小型大写字母
                        可选值  normal 默认值，文字正常显示
                               small-caps 文本以小型大写字母显示
                  小型大写字母
                        将所有的字母都以大写形式显示，但是小写字母的大写
                            要比大写字母的大小小一些
                            
                */
                font-variant: small-caps;
                
            }
            
            .p2{
                /*设置一个文字大小*/
                font-size: 50px;
                /*设置字体*/
                font-family: "comic sans ms";
                /*设置文字斜体*/
                font-style: italic;
                /*设置文字加粗*/
                font-weight: bold;
                /*设置文字小型大写字母*/
                font-variant: small-caps;
            }
            
            .p3{
                /*
                  在css中还提供了一个样式font
                  使用该样式可以同时设置字体相关所有样式
                  可以将字体的样式的值，统一写在font样式中，不同的值之间使用空格隔开
                  
                  使用font设置字体时，斜体 加粗 大小字母，没有顺序，甚至可写可不写
                  不写则是默认值，但是要求文字的大小和字体必须写，字体必须是最后一个样式，
                  大小是倒数第二个
                  
                  实际上使用简写属性会有一个比较好的性能
                */
               font: italic small-caps bold 60px;
               
            }
        </style>
    </head>
    <body>
        <p class="p3">我是一段文字，ABCDEFGabcdefg</p>
        <p class="p1">我是一段文字，ABCDEFGabcdefg</p>
        <p class="p2">我是一段文字，ABCDEFGabcdefg</p>
    </body>
</html>

font-size 文字大小　　font-family 文字样式　　

font-style 可以设置文字的斜体：normal  默认值，文字正常显示   italic 文字会以斜体显示    oblique  文字会以倾斜方式显示  （大部分浏览器不会对倾斜和斜体做区分，设置italic和oblique效果一样，一般使用前一种）

font-weight 可以设置文本加粗效果：normal  默认值，文字正常显示  bold 文字加粗显示（该样式可指定100-900）

font-variant 可以用来设置小型大写字母：normal默认值，文字正常显示  small-caps  文本以小型大写字母显示

CSS中提供了一个font样式，该样式可同时设置字体相关所有样式，可将字体样式的值统一写在font中，不同值使用空格隔开

 在font中，斜体 加粗 大小字母没有顺序，可写可不写，但文字大小和字体必须写，字体必须是最后一个，大小是倒数第二个

 使用简写属性会有一个比较好的性能

posted @ 2021-07-01 15:01  2237774566  阅读(79)  评论(0)    收藏  举报