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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/42013369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 04:13:57  来源:igfitidea点击:

How to include fonts in self contained Angular 2 component

angulartypescriptimportfontsangular-cli

提问by Brian

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,所以无论如何我都无法控制 webpack.config。

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.

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

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...

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

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

回答by Fabrizio Caldarelli

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

如果您将文件放在 /assets 文件夹(在 src 文件夹内),您可以使用以下方式引用字体:

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

and then use it in the html.

然后在html中使用它。