javascript - fonts/ionicons.ttf?v=2.0.0 404(未找到)-CSS-Angular-localhost

Question

有人可以告诉我如何解决以下错误吗？ 我从互联网上下载了模板。尝试转换成 Angular 2分量。一切都很好，我可以看到应用程序在我的机器上运行在 localhost:4200 下。但我不知道为什么会出现以下错误，并且应用程序中没有加载图标

在我的index.html中有以下网址

 <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' >
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" >

在我的meterialize.css

@font-face{
    font-family:"Roboto";
    src:local(Roboto Thin), 
    url("../fonts/roboto/Roboto-Thin.eot");
    src:url("../fonts/roboto/Roboto-Thin.eot?#iefix") 
    format("embedded-opentype"), 
    url("../fonts/roboto/Roboto-Thin.woff2") format("woff2"), 
    url("../fonts/roboto/Roboto-Thin.woff") format("woff"), 
    url("../fonts/roboto/Roboto-Thin.ttf") format("truetype");font-weight:200;
}
@font-face{
    font-family:"Roboto";
    src:local(Roboto Light), 
    url("../fonts/roboto/Roboto-Light.eot");
    src:url("../fonts/roboto/Roboto-Light.eot?#iefix") format("embedded-opentype"), 
    url("../fonts/roboto/Roboto-Light.woff2") format("woff2"), 
    url("../fonts/roboto/Roboto-Light.woff") format("woff"), 
    url("../fonts/roboto/Roboto-Light.ttf") format("truetype");
    font-weight:300;
}
@font-face{
    font-family:"Roboto";
    src:local(Roboto Regular), 
    url("../fonts/roboto/Roboto-Regular.eot");
    src:url("../fonts/roboto/Roboto-Regular.eot?#iefix") format("embedded-opentype"), 
    url("../fonts/roboto/Roboto-Regular.woff2") format("woff2"), 
    url("../fonts/roboto/Roboto-Regular.woff") format("woff"), 
    url("../fonts/roboto/Roboto-Regular.ttf") format("truetype");
    font-weight:400;
}
@font-face{
    font-family:"Roboto";
    src:url("../fonts/roboto/Roboto-Medium.eot");
    src:url("../fonts/roboto/Roboto-Medium.eot?#iefix") format("embedded-opentype"), 
    url("../fonts/roboto/Roboto-Medium.woff2") format("woff2"), 
    url("../fonts/roboto/Roboto-Medium.woff") format("woff"),
     url("../fonts/roboto/Roboto-Medium.ttf") format("truetype");
     font-weight:500;
    }
@font-face{
    font-family:"Roboto";
    src:url("../fonts/roboto/Roboto-Bold.eot");
    src:url("../fonts/roboto/Roboto-Bold.eot?#iefix") format("embedded-opentype"), 
    url("../fonts/roboto/Roboto-Bold.woff2") format("woff2"), 
    url("../fonts/roboto/Roboto-Bold.woff") format("woff"), 
    url("../fonts/roboto/Roboto-Bold.ttf") format("truetype");
    font-weight:700;
}
@font-face{
font-family:"Material-Design-Icons";
src:url("../fonts/material-design-icons/Material-Design-Icons.eot?#iefix") 
format("embedded-opentype"), 
url("../fonts/material-design-icons/Material-Design-Icons.woff2") format("woff2"), 
url("../fonts/material-design-icons/Material-Design-Icons.woff") format("woff"), 
url("../fonts/material-design-icons/Material-Design-Icons.ttf") format("truetype"), 
url("../fonts/material-design-icons/Material-Design-Icons.svg#Material-Design-Icons") format("svg");font-weight:normal;font-style:normal;}

控制台错误

materialize.min.js:6 GET http://localhost:4200/assets/fonts/ionicons.ttf?v=2.0.0 404 (Not Found)
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:7
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:6
materialize.min.js:6 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.woff2 404 (Not Found)
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:7
(anonymous) @ materialize.min.js:6
(anonymous) @ materialize.min.js:6
core.js:3688 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
about:106 GET http://localhost:4200/assets/fonts/ionicons.woff?v=2.0.0 404 (Not Found)
about:106 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.woff 404 (Not Found)
about.component.ts:19 about {basicInfo: Array(1), exp: Array(1), prog_skills: Array(1), otherSkAndDevTools: Array(1), socialNwrk: Array(1)}
about:106 GET http://localhost:4200/assets/fonts/roboto/Roboto-Regular.ttf 404 (Not Found)
aos.min.js:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.woff2 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
aos.min.js:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.woff2 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
aos.min.js:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.woff2?v=4.5.0 404 (Not Found)
o @ aos.min.js:1
r @ aos.min.js:1
(anonymous) @ aos.min.js:1
r @ aos.min.js:1
O @ aos.min.js:1
S @ aos.min.js:1
(anonymous) @ custom-script.js:1
j @ jquery-2.1.3.min.js:2
fireWith @ jquery-2.1.3.min.js:2
ready @ jquery-2.1.3.min.js:2
I @ jquery-2.1.3.min.js:2
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.woff 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.woff 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.woff?v=4.5.0 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Medium.ttf 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/roboto/Roboto-Light.ttf 404 (Not Found)
about:1 GET http://localhost:4200/assets/fonts/fontawesome-webfont.ttf?v=4.5.0 404 (Not Found)

我尝试了所有可能的解决方案，但没有任何帮助我

Answer 1

对于 CSS 中导入的所有字体，它都会返回 404 错误(未找到)，您必须决定是否要使用:

• 来自 Google 的字体:导入到您的 HTML 文件中。
• 元素中本地路径的字体:在 CSS 文件中定义。

您可以将它们组合起来，但您显示了两个选项，您需要做出决定，以便我们可以修复它。

检查第一个 URL 是否错误:http://localhost:4200/assets/fonts/ionicons.ttf?v=2.0.0] 1下载文件或也返回错误。

问题可能出在 CSS 文件中定义的路径，例如 src:url("../fonts/roboto/Roboto-Medium.eot");。