关于html5的问题

显示出来的结果都成了服务器字体，字体恢复默认
问题：

img


我的代码以及编译的结果：

img

img

img

回答如下，记得采纳！
错误很多，微软雅黑用英文，'@font-face' 没写字体路径

<!DOCTYPE html>
<html>
<head>
    <title>自定义字体样式</title>
    <style>
        @font-face {
            font-family: 'serverFont';
            src: url('serverFont.otf');  /* 这里写你服务器字体的路径，如果和html文件在同一个文件夹，那你改个字体名就行*/
        }

        p:first-child {
            font-family: 'Microsoft YaHei', sans-serif;
            font-size: 18px;
            color: red;
            font-style: italic;
            font-weight: bold;
        }

        p:nth-child(2) {
            font-family: 'serverFont', sans-serif;
            font-size: 24px;
            color: blue;
        }
    </style>
</head>
<body>
    <p>这是第一个段落</p>
    <p>这是第二个段落</p>
</body>
</html>