如何在网页上使用本地安装的字体文件？

网页中应用本地已安装字体

在网页设计中，你可能希望使用系统中已安装的特定字体，但直接在css中使用字体名称却无效。本文将演示如何正确地在网页中调用本地安装的字体。

问题：本地字体无法在网页中显示

假设你已安装字体“荆南麦圆体”，但CSS代码：

html, body {   font-size: 18px;   font-family: "荆南麦圆体", "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; }

仍然显示“微软雅黑”，而非“荆南麦圆体”。你不想通过src属性加载字体文件，因为字体文件体积较大。

解决方法：利用@font-face规则

解决这个问题的关键在于使用@font-face规则，它允许你定义自定义字体，并将其应用于网页元素。 由于你希望使用本地已安装字体，无需指定src路径。 浏览器会自动查找并使用系统中已安装的字体。

正确的CSS代码如下：

@font-face {   font-family: 'JingNanMaiYuanTi'; /* 定义字体名称，建议使用英文名称 */ }  html, body {   font-size: 18px;   font-family: 'JingNanMaiYuanTi', "微软雅黑", "Helvetica Neue", Helvetica, Arial, sans-serif; }

关键在于：

1. 定义字体名称: @font-face 规则中定义一个易于识别的字体名称（例如英文名称），避免中文名称可能带来的兼容性问题。
2. 使用字体名称: 在font-family 属性中使用步骤1中定义的字体名称。 浏览器会优先查找这个名称对应的字体。如果找不到，则会依次使用备选字体。

修改CSS代码后，如果仍然无法显示，请尝试刷新浏览器缓存或重启浏览器。 确保你的操作系统已正确安装并启用该字体。