HTML文件不在Web Root目录时@font-face字体无法加载的问题求助

我知道这可能是个老问题了，但我现在遇到了和之前某位提问者一模一样的情况——不管是在本地开发环境还是线上服务器，只要HTML文件不在Web根目录里，字体就加载不出来。麻烦大家帮我看看怎么解决，谢谢！

我的目录结构 #

Web根目录下我建了三个文件夹：

• css：存放样式文件
• fonts：存放字体文件
• livres：我的部分HTML文件存在这里（包括出问题的index.html）

相关代码细节 #

1. css/main.css 里的字体和样式定义

@font-face {
  font-family: "Recoleta-SemiBold";
  src: url('/fonts/Recoleta-SemiBold.woff') format('woff'),
       url('/fonts/Recoleta-SemiBold.eot?#iefix') format('embedded-opentype'),
       url('/fonts/Recoleta-SemiBold.ttf') format('truetype');
  font-weight: 600; /* 500 for medium, 600 for semi-bold */
  font-style: normal;
  font-display: swap;
}

.header .title {
  font-family: "Recoleta-SemiBold", "Georgia", serif;
  font-size: 40px;
  font-weight: normal;
  margin: 0px;
  padding-left: 10px;
  color:#3f0ec6;
}

2. livres/index.html 内容

<head>部分：

<base href = "https://www.yoga-kids.net/">

<body>部分：

<header>
  <div class = "header">
    <div class = "title">Livre de yoga</div>
  </div> <!-- end header -->
</header>

奇怪的现象 #

当index.html放在livres目录里时，字体完全不显示；可一旦把这个文件移到Web根目录下，字体就正常加载显示了！本地和服务器上的表现完全一致...

求助 #

有没有大佬能告诉我问题出在哪，怎么修复这个问题？万分感谢！

Chris

内容来源于stack exchange