Angular项目中如何引入字体？求助无法成功引入的问题

嘿，看来你在Angular项目里引入字体时碰到了坎儿，我帮你梳理下当前写法里的问题，再给你一套靠谱的实现步骤：

首先，修正@font-face的语法错误 #

你当前的写法缺了关键的大括号，而且url的语法也不对（写成了url:'...'，正确应该是url('...')），这是CSS语法层面的基础问题，先把这个改过来。

然后，规范Angular里的字体文件存放路径 #

Angular对资源文件的处理有默认规则，建议把字体文件统一放到src/assets/fonts目录下（比如LatoBlack放到src/assets/fonts/LatoBlack/，fontello的文件放到src/assets/fonts/fontello/），这样Angular打包时会自动识别并包含这些资源，不用额外配置（如果你的字体不在assets里，需要在angular.json的assets数组里添加对应路径）。

正确的引入代码示例（以全局样式文件src/styles.scss为例） #

1. 引入fontello的scss：

@import "./assets/fonts/fontello/css/fontello.scss";

2. 正确编写@font-face规则：

@font-face {
  font-family: 'latoblack';
  src: url('./assets/fonts/LatoBlack/lato-black.eot');
  src: url('./assets/fonts/LatoBlack/lato-black.eot?#iefix') format('embedded-opentype'),
       url('./assets/fonts/LatoBlack/lato-black.woff') format('woff'),
       url('./assets/fonts/LatoBlack/lato-black.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

使用字体 #

之后你就可以在任意组件样式或全局样式里使用这个字体了：

.your-target-class {
  font-family: 'latoblack', sans-serif;
}

额外要注意的坑 #

• 检查angular.json里的assets配置，确保包含了你的字体路径，默认配置一般是：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

如果你的字体没放在assets里，比如直接在src/fonts下，要把"src/fonts"添加到这个数组里。

• 路径要注意大小写！很多时候本地开发没问题，部署到Linux服务器上就出错，就是因为文件名/路径大小写不匹配。
• 如果用fontello，要检查它自带的scss里的字体路径是否正确，有时候fontello生成的文件里路径是相对自身的，需要调整成适配Angular的路径。

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