网页中应用本地已安装字体
在网页设计中，你可能希望使用系统中已安装的特定字体，但直接在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;
}
关键在于：
-
定义字体名称:
@font-face规则中定义一个易于识别的字体名称（例如英文名称），避免中文名称可能带来的兼容性问题。 -
使用字体名称: 在
font-family属性中使用步骤1中定义的字体名称。 浏览器会优先查找这个名称对应的字体。如果找不到，则会依次使用备选字体。
修改CSS代码后，如果仍然无法显示，请尝试刷新浏览器缓存或重启浏览器。 确保你的操作系统已正确安装并启用该字体。
