如何在自包含的 Angular 2 组件中包含字体 [英] How to include fonts in self contained Angular 2 component

问题描述

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

I have a component that requires a custom font as a dependency. I'd like the component to handle the import of the fonts itself so it's portable. Also, our projects are using angular-cli so I have no control over webpack.config anyway.

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

I was hoping angular-cli was smart enough to move the font if I did a simple import in the component, but it doesn't get moved on build.

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

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

Anyway, simply put I need the font moved to the build directory where I can reference it from my css...

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

推荐答案

如果你把文件放在/assets 文件夹(在 src 文件夹内)，你可以用:

If you put files in /assets folder (inside src folder), you can refer the font with:

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

然后在 html 中使用它.

and then use it in the html.

这篇关于如何在自包含的 Angular 2 组件中包含字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！