网页上如何使用自己电脑上安装的字体文件？

Question

我在网上下载了一种免费字体，如下：

安装到了系统里如下：

现在我该如何在网页上使用这个字体了，我自己的网站的 css 代码片段如下：

/*@font-face {
    font-family: 'MyFont';
    src: url('/style1/font/荆南麦圆体.otf') format('truetype');
}*/
html, body{font-size:18px;font-family:"荆南麦圆体", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;}

我明明把 荆南麦圆体 放到了第一位，但他还是显示的是微软雅黑字体，请问这个该怎么写才能显示成 荆南麦圆体 呢？

各位大佬请不要回答别人的机器能不能显示这个字体哦，我只要我的电脑能显示这个字体就行了。

另外因为这个字体库文件比较大，我不希望使用 src 那种方式引入自定义字体。

Answer 1

@font-face {
    font-family: 'MyFont';
    src: url('/style1/font/荆南麦圆体.otf') format('truetype');
}

font-family:"荆南麦圆体", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;

应该是

font-family:"MyFont", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif;

---

安装完字体之后，重启试试，我在本地试着是可以的。