字体属性详解 – 开源达人博客

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('fonts/webfont.eot');
            /* IE9*/
            src: url('fonts/webfont.eot') format('embedded-opentype'),
                /* IE6-IE8 */
                url('fonts/webfont.woff2') format('woff2'),
                url('fonts/webfont.woff') format('woff'),
                /* chrome、firefox */
                url('fonts/webfont.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('fonts/webfont.svg') format('svg');
            /* iOS 4.1- */
        }

        .para1 {
            font-family: '宋体';
        }

        .para2 {
            font-family: '微软雅黑';
        }

        .para3 {
            font-family: 'SimSun';
        }

        .para4 {
            font-family: 'Microsoft Yahei';
        }

        .para5 {
            font-family: 'Times New Roman', serif, 'Microsoft Yahei';
        }

        h3 {
            font-family: 'webfont';
            color: rgb(250, 50, 190);
        }
    </style>
</head>

<body>
    <p class="para1">imooc慕课网</p>
    <p class="para2">imooc慕课网</p>
    <p class="para3">imooc慕课网</p>
    <p class="para4">imooc慕课网</p>
    <p class="para5">imooc慕课网</p>
    <h3>电商</h3>
    <h3>购物</h3>
    <h3>优惠</h3>
</body>

</html>
CSS

我们要如何帮助您？
