Angular项目中CSS字体引用报错CssSyntaxError如何解决？

我来帮你搞定这个字体找不到的问题！先给你拆解下错误根源：

你放在src/assets/里的all.css，写的字体引用路径是../webfonts/fa-brands-400.ttf——这个路径的意思是从当前assets目录往上走一级（也就是src/目录）去找webfonts文件夹，但你的项目结构里src下面根本没有这个文件夹，所以webpack编译时自然找不到文件，抛出了这个错误。

下面给你两种针对性的解决方案，看你属于哪种情况：

情况1：你是手动下载了Font Awesome字体文件 #

• 第一步：在src/assets目录下新建一个webfonts文件夹，把fa-brands-400.ttf以及其他需要的Font Awesome字体文件都放进去
• 第二步：打开all.css，把所有字体引用的路径从../webfonts/改成./webfonts/（因为现在webfonts和all.css是同级目录，相对路径用./就能正确指向它）

情况2：你是通过npm安装的Font Awesome #

如果是用npm install @fortawesome/fontawesome-free这类命令安装的，不需要手动复制字体文件，直接在Angular配置里把字体目录加入assets即可：

• 打开项目根目录下的angular.json文件
• 找到projects -> [你的项目名称] -> architect -> build -> options -> assets这个数组
• 添加下面这一行配置：

  { "glob": "**/*", "input": "./node_modules/@fortawesome/fontawesome-free/webfonts", "output": "/assets/webfonts/" }
  

• 保存配置后重启ng serve（angular.json的修改需要重启编译服务才会生效）
• 之后你CSS里的字体引用路径可以保持../webfonts/，或者改成绝对路径/assets/webfonts/（后者更不容易出错）

最后验证一下：重启服务后刷新页面，检查浏览器控制台是否还有报错，同时看看字体图标是否正常显示就可以了。

内容的提问来源于stack exchange，提问作者Kerk