Question

有人可以告诉我如何解决以下错误。？我有从互联网下载模板。试图转换成角度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文件中定义。

您可以将它们组合在一起但是您同时显示这两个选项，您需要对其进行选择，以便我们能够解决它。

检查错误的第一个网址：http://localhost:4200/assets/fonts/ionicons.ttf?v=2.0.0] 1是否下载了文件，或者还返回错误。

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

Answer 2

最后我从github下载了所需的dep文件并将其放入资产文件夹

后解决了这个问题

fonts / ionicons.ttf？v = 2.0.0 404（未找到） - CSS- Anuglar - 本地主机

2 个答案: