lovecoding
/
J250419


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>CSS字体样式</title>
    <!--
        CSS有五种通用字体

    -->
    <style>
        /*字体设置*/
        .font1{
            font-family: Serif; /*衬线字体*/
            font-style: normal; /*字体样式：正常显示*/
            font-size: 55px;    /*字体大小：55px*/
        }
        .font2{
            font-family: SansSerif; /*无衬线字体*/
            font-style: italic; /*字体样式：斜体*/
            font-size: 5vw;    /*字体大小：55vw vw:视口宽度，视口就是浏览器窗口的大小，
            1vw=视口宽度的1%，如果视口宽度50厘米，1vw就是0.5厘米*/
        }
        .font3{
            font-family: Monospaced; /*等宽字体*/
            font-style: oblique; /*字体样式：字体倾斜*/
        }
        .font4{
            font-family: Cursive; /*草书字体*/
            font-weight: normal; /*字体粗细：正常显示*/
        }
        .font5{
            font-family: Fantasy; /*幻想字体*/
            font-weight: bold; /*字体粗细：加粗*/
        }
    </style>
</head>
<body>
    <p class="font1">
        我是一段内容，Hello World! 123456。
    </p>
    <p class="font2">
        我是一段内容，Hello World! 123456。
    </p>
    <p class="font3">
        我是一段内容，Hello World! 123456。
    </p>
    <p class="font4">
        我是一段内容，Hello World! 123456。
    </p>
    <p class="font5">
        我是一段内容，Hello World! 123456。
    </p>
</body>
</html>