在Angular中使用字体加载器

Question

如何在Angular中使用字体加载器，例如WebFontLoader或FontFaceObserver？

我不确定在哪里以及如何导入它，并在组件中使用。

- Waddas

Answer 1

请执行以下操作：
npm install webfontloader

然后，在您的组件中，您可以按如下方式进行编写：

app.component.ts:

import * as WebFont from 'webfontloader';
// ...
ngOnInit(){
  WebFont.load({/* your config...*/})
}

- Bagherani

---

你可以在任何地方使用它，不仅限于组件。 只需在代码中运行WebFont.load(...)一次，字体就会在所有组件中可用。我已经成功地从服务构造函数中加载了它。 - vanwinter

Answer 2

我一直在index.html文件中进行配置（根据github上的README）。

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js">    
</script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

- Rich

Answer 3

使用这种方法：

1. 从npm安装fontfaceobserver包

   npm i fontfaceobserver
   

2. 设置字体观察器（注意：您需要在应用程序中使用此设置一次）

   import FontFaceObserver from 'fontfaceobserver';
   
   ngOnInit(): void {
       const font = new FontFaceObserver('My Family', {
         weight: 400
       });
   
       font.load().then(function () {
         console.log('字体可用');
       }, function () {
         console.log('字体不可用');
       });
   }
   

如果您想要实现多种字体观察器以及更多可选配置，可以查看官方页面：https://www.npmjs.com/package/fontfaceobserver

希望这能对您有所帮助。

- Kamran Taghaddos