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

我在网上下载了一种免费字体,如下:

安装到了系统里如下:

现在我该如何在网页上使用这个字体了,我自己的网站的 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 那种方式引入自定义字体。

阅读 1.1k
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;

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题