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

问题描述

我有一个需要自定义字体作为依赖的组件。我想组件来处理字体本身的导入，所以它是可移植的。另外，我们的项目正在使用angular-cli，所以我无法控制webpack.config。

我希望angular-cli聪明地移动字体，如果我

  import'.my-custom-font在组件中做了一个简单的导入，但是它并没有在构建中移动。
 .woff'; //不工作
  

无论如何，我只需要将字体移动到构建目录，可以引用它从我的CSS ...

  @ font-face {
 font-family：自定义字体 ; 
 src：url（?????? / my-custom-font.woff）格式（woff）
} 
   
 
 
 
  @ font-face {
 font-family：自定义字体; 
 src：url（/ assets / my-custom-font.woff）格式（woff）
} 
  
，然后在html中使用它。
 
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.

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
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")
}

解决方案
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")
}
and then use it in the html.

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