字体

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字体</title>
        <style type="text/css">
            div{
                border: 1px red solid;
                font-size: 30px;
                line-height: 30px;
                /* 行间距=行高-字体 */
            }
            
            p{
                font-size: 30px;
                /* 
                    字重 字体是否加粗
                    可以设置一个100-900之间的值
                    值越大字体越粗
                    注意:200不一定比100粗,也有可能和100一样
                 */
                /* font-weight: 300px; */
                font-weight: bold;
                
                /* 
                    font-style用来设置字体的样式(斜体)
                        可选值
                            normal正常
                            italic斜体
                 */
                font-style: italic;
                
                /* 
                    font-variant字体变形
                        small-caps小型大写字母
                 */
                font-variant: small-caps;
            }
            
             span {
                        /*
                        font-size: 40px;
                        font-family: '微软雅黑';
                        font-weight: bold;
                        font-style: italic;
                        font-variant: small-caps;
            */
                        /*        font字体简写属性,可以同时设置字体相关的所有样式
                                    后边两个必须是字体大小和字体族,必须写
                                font:[加粗 斜体 变形] 大小/行高 字体族;
                        
                        */
            /*            font: bold italic small-caps 40px '微软雅黑';*/
                        font: 40px/1.5 '微软雅黑';
                    }
        </style>
    </head>
    <body>
        <p>hello</p>
        <div>hello 你好hello 你好hello 你好hello 你好hello 你好hello 你好
            hello 你好hello 你好hello 你好hello 你好hello 你好hello 你好hello 你好hello 你好
            hello 你好hello 你好hello 你好hello 你好hello 你好hello 你好hello 你好hello 你好
        </div>
    </body>
</html>

 

posted @ 2022-05-16 21:16  氯丙嗪  阅读(4)  评论(0编辑  收藏  举报