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

我自己找到了答案。

@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;
}

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

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

如果路径没有错误，那么它可能是如下所述的权限：https://stackoverflow.com/a/43910775/6737468