如何在自包含的Angular 2组件中包含字体

Question

我有一个需要自定义字体作为依赖项的组件。我希望该组件能够处理字体本身的导入，因此它是可移植的。另外，我们的项目使用的是angular-cli，所以无论如何我都无法控制webpack.config。

我希望angular-cli足够智能，如果我在组件中进行了简单的导入，就可以移动字体，但它不会在构建时移动。

import '.my-custom-font.woff'; // doesn't work

无论如何，简单地说我需要将字体移动到构建目录，我可以从我的css中引用它...

@font-face {
  font-family: "Custom Font";
  src: url("??????/my-custom-font.woff") format("woff")
}

Answer 1

如果将文件放在/ assets文件夹（src文件夹内）中，可以使用以下字体引用该字体：

@font-face {
  font-family: "Custom Font";
  src: url("/assets/my-custom-font.woff") format("woff")
}

然后在html中使用它。