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

网站集成本地字体：解决“荆南麦圆体”显示问题

成功安装系统字体后，如何在网页中正确调用呢？本文将解决如何在网站上使用本地安装的“荆南麦圆体”字体，并避免使用src属性直接引入字体文件（因文件较大）。

以下是一个常见的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; }

尽管将“荆南麦圆体”置于字体列表首位，网页仍显示“微软雅黑”。问题在于，浏览器无法直接识别本地安装的字体文件路径。

解决方案：

我们需要修正CSS代码，正确地定义和应用自定义字体。

1. 定义字体（@font-face）： 虽然我们不直接使用src引入字体文件，但仍然需要@font-face规则来告诉浏览器字体名称。 关键在于，我们无需指定字体文件路径，浏览器会自动从系统字体库中查找。

   @font-face {     font-family: 'JingNanMaiYuanTi'; /* 使用更简洁的字体名称 */ }

2. 应用字体： 在font-family属性中，使用步骤1中定义的字体名称。

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

通过以上修改，浏览器会优先尝试使用名为“JingNanMaiYuanTi”的系统字体。如果系统已安装该字体，网页将正确显示。 如果未安装，则会依次使用备选字体。

额外建议：

• 字体名称： 使用更简洁、易于记忆的字体名称，例如JingNanMaiYuanTi，避免使用包含空格或特殊字符的名称。
• 浏览器缓存： 修改CSS后，清除浏览器缓存或重启浏览器，确保浏览器加载最新的CSS规则。

通过这些调整，您应该能够在网页上成功显示“荆南麦圆体”字体，同时避免因直接引入字体文件而导致的加载速度问题。