net :: ERR_ABORTED 404（未找到）-控制台错误

Question

将我的wordpress网站上传到实时服务器后，我在控制台中遇到关于找不到我的字体的错误。由于未加载移动图标。

这两个文件都存在于该字体文件夹中。请看图片。

我正在style.css中使用这些CSS代码导入这些字体

@font-face {
  font-family: 'MobiriseIcons';
  src:  url('../fonts/Mobirise.eot?5dqoim');
  src:  url('../fonts/Mobirise.eot?5dqoim#iefix') format('embedded-opentype'),
    url('../fonts/Mobirise.ttf?5dqoim') format('truetype'),
    url('../fonts/Mobirise.woff?5dqoim') format('woff'),
    url('../fonts/Mobirise.svg?5dqoim#MobiriseIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

谁能告诉我为什么我得到这个错误。这个错误与我的托管有关吗？

Answer 1

如果没有错误，则没有路径，则可以是此处所述的权限： https://stackoverflow.com/a/43910775/6737468

Answer 2

您需要在web.config（system.webServer\staticContent）中注册字体。

  <remove fileExtension=".eot"/>
  <remove fileExtension=".woff2"/>

  <mimeMap fileExtension=".woff2" mimeType="font/woff2"/>
  <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject"/>
  <mimeMap fileExtension=".otf" mimeType="font/otf"/>
  <mimeMap fileExtension=".woff" mimeType="font/x-woff"/>

Answer 3

我自己找到了答案。

@font-face {
  font-family: 'MobiriseIcons';
  src:  url('../fonts/Mobirise.eot?5dqoim');
  src:  url('../fonts/Mobirise.eot?5dqoim#iefix') format('embedded-opentype'),
    url('../fonts/Mobirise.ttf?5dqoim') format('truetype'),
    url('../fonts/Mobirise.woff?5dqoim') format('woff'),
    url('../fonts/Mobirise.svg?5dqoim#MobiriseIcons') format('svg');
  font-weight: normal;
  font-style: normal;
}

在上面的代码中，我使用的Mobirise带有大写的M，而文件名带有小m，可以在上面的屏幕截图中看到。