@font-face引入本地字体文件时网站字体不显示问题

你的几种写法都存在基础用法错误，逐个修正即可：

之前写法的核心问题 #

• 直接写C盘绝对路径的写法完全不可行：现代浏览器有严格的安全沙箱限制，禁止网页直接访问本地磁盘的绝对路径资源，这类请求会被浏览器直接拦截，根本不会发起加载。
• local()函数用法错误：local()的作用是匹配用户系统中已经安装的字体名，不是传本地文件路径的，比如要优先调用系统已安装的对应字体才会写local("JandaManateeSolid")，传磁盘路径进去完全无法识别。
• format()参数值写错：ttf格式字体对应的正确format参数是truetype，你写的"ttf"是无效值，浏览器无法识别字体类型会直接跳过该资源加载。
• 相对路径不生效的核心原因：路径层级写反了。从你贴的项目结构来看，CSS文件存放在独立的css文件夹中，和存放字体的fonts文件夹同属项目根目录下的同级文件夹，你写fonts/JandaManateeSolid.ttf相当于在css文件夹里找fonts子文件夹，自然找不到文件。

正确写法 #

如果你的CSS写在独立的.css文件中（位于css文件夹下），请用以下代码：

@font-face {
  font-family: 'JandaManatee';
  /* 路径逻辑：../回到项目根目录，再进入fonts文件夹找对应字体文件 */
  src: url('../fonts/JandaManateeSolid.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 优化字体加载体验，避免文字长时间空白 */
}

body {
  margin: 0;
  font-family: "JandaManatee", sans-serif;
}

如果CSS是直接写在HTML文件的<style>标签内，路径直接写url('fonts/JandaManateeSolid.ttf')即可。

必做排查项 #

写完如果还是不生效，按以下顺序排查：

• 不要直接双击HTML文件用file://协议打开页面，本地测试必须启动本地静态服务器：比如VSCode安装Live Server插件右键启动服务，或者在项目根目录执行命令python -m http.server后通过localhost访问，file协议下多数浏览器会拦截本地字体资源的加载。
• 打开浏览器开发者工具，切换到「网络(Network)」面板，筛选「字体(Font)」分类，看字体请求的状态码：如果是404说明路径层级还是错的，直接看请求的完整URL拼接结果调整相对路径即可。
• 双击本地的ttf字体文件，确认文件本身没有损坏、可以正常预览，损坏的字体即使加载成功也无法正常渲染。
• 部署到线上时，需要给服务器配置ttf字体对应的MIME类型为font/ttf，否则服务器会返回403或错误资源类型导致字体加载失败。

内容的提问来源于stack exchange，提问作者Kascey Rodgers