angular - 如何在独立的 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 中使用它。