我有一个字体，无法在任何地方加载 ，但是会在Chrome的localhost上加载。当我将文件上传到live server或在其他浏览器（如Safari）中打开localhost时，将不会加载。

示例： Left side is Chrome on localhost,right side is Safari on localhost.

我已经检查了数十遍代码，检查我的文件结构是否正确，再次下载字体以检查它们是否损坏，并确保我的字体系列相同。

文件：

_fontface.scss

@font-face {
 font-family: "Ortica-Light";
  src:
   local("Ortica-Light"),url("/src/styles/fonts/Ortica-Light.woff2") format("woff2"),url("/src/styles/fonts/Ortica-Light.woff") format("woff"),url("/src/styles/fonts/Ortica-Light.ttf") format("ttf"),url("/src/styles/fonts/Ortica-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
}

_typography.scss

$headings: "Ortica-Light";

h1,h2,h3 {
 font-family: $headings; //"Ortica-Light"
 font-weight: normal;
}

base.scss

@import "_fontface.scss";

文件结构

src
├ components
└ styles
  ├ _fontface.scss
  ├ _typography.scss
  ├ base.scss
  └ fonts
    ├ Ortica-Light.otf
    ├ Ortica-Light.ttf
    ├ Ortica-Light.woff
    └ Ortica-Light.woff2

当我转到另一个浏览器并打开localhost或在任何浏览器（包括Chrome）中打开实时链接并打开DevTools来检查我得到的文件font files that doesn't look anything like the font。