Question

我有一个字体，无法在任何地方加载，但是会在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。

为什么我的字体无法加载到Chrome本地主机以外的任何地方？

文件：

0 个答案: