如何在网页上正确使用本地安装的“荆南麦圆体”？-css教程-PHP中文网

如何在网页上正确使用本地安装的“荆南麦圆体”？

聖光之護

发布： 2025-03-16 09:38:01

原创

538人浏览过

如何在网页上正确使用本地安装的“荆南麦圆体”？

网页中应用本地安装字体的正确方法

许多用户在电脑上安装新字体后，希望在网页中使用，却发现网页仍然显示默认字体，例如安装了“荆南麦圆体”却显示“微软雅黑”。本文将指导您如何在网页中正确使用本地安装的字体，例如“荆南麦圆体”。

首先，确保您的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;}

登录后复制

代码中@font-face规则被注释，且font-family直接使用了“荆南麦圆体”，这会导致浏览器无法正确识别。

正确的做法是启用@font-face规则，并确保字体名称与font-family属性中使用的名称一致。由于您希望避免使用src属性直接引用字体文件，我们可以利用浏览器已知的系统字体机制。

Onlook

专为前端设计师和开发者打造的视觉编辑工具

108

查看详情

改进后的代码如下：

@font-face {
    font-family: 'JingNanMaiYuanTi'; /* 使用更规范的字体名称 */
    src: url('/style1/font/荆南麦圆体.otf') format('truetype');
}

html, body {
    font-size: 18px;
    font-family: 'JingNanMaiYuanTi', '微软雅黑', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

登录后复制

我们使用了更规范的字体名称JingNanMaiYuanTi，并将其与font-family属性中的名称保持一致。浏览器会优先尝试使用@font-face中定义的字体，如果找不到，则会依次尝试备选字体。

最后，安装字体后，建议重启浏览器或电脑，以确保浏览器能够正确识别新字体。在本地测试中，此方法有效。请注意，@font-face方法需要服务器支持，如果在本地测试，需要确保文件路径正确。

以上就是如何在网页上正确使用本地安装的“荆南麦圆体”？的详细内容，更多请关注php中文网其它相关文章！