Question

嘿是否可以使用Angular 2.4动态加载字体？我尝试了以下但它不起作用。

<style>
  @font-face { font-family: '{{ font.name }}';
    src: url('{{ font.url }}')  format('woff'); }
</style>

@Component({
  selector: 'nova-font-loader',
  templateUrl: './template.html'
})
export class NovaFontLoaderComponent implements OnInit {

  private font;

  constructor() { }

  ngOnInit() {
    this.font = {
      url: 'test.woff',
      name: 'test'
    };
  }

}

它会生成以下控制台输出：

获取http://localhost:4200/url(%7B%7B%20font.url%20%7D%7D) 404（未找到）

未处理的承诺拒绝：无法加载网址（％7B％7B％20font.url％20％7D％7D）;区域：;任务：Promise.then;值：无法加载网址（％7B％7B％20font.url％20％7D％7D）

Answer 1

您可以为每种字体样式创建一个组件，并在根组件中导入符合条件：

Roboto的例子。

<强>组件

注意：encapsulation: ViewEncapsulation.None对于这种情况非常重要。

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-font-roboto',
  templateUrl: './font-roboto.component.html',
  encapsulation: ViewEncapsulation.None,
  styleUrls: ['./font-roboto.component.scss']
})
export class FontRobotoComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

<强> SCSS

@font-face {
    font-family: 'Roboto';
    src: url("/assets/fonts/Roboto/Roboto-Regular.eot");
    /* IE9 Compat Modes */
    src: url("/assets/fonts/Roboto/Roboto-Regular.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/Roboto/Roboto-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
}

@font-face {
    font-family: 'RobotoBold';
    src: url("/assets/fonts/Roboto/Roboto-Bold.eot");
    /* IE9 Compat Modes */
    src: url("/assets/fonts/Roboto/Roboto-Bold.eot?#iefix") format('embedded-opentype'), /* IE6-IE8 */
    url('/assets/fonts/Roboto/Roboto-Bold.ttf') format('truetype'), /* Safari, Android, iOS */
}

body { 
    font-family: 'Roboto', sans-serif;
}

根组件逻辑

模板 [HTML]

<div [ngSwitch]="fontType">
   <app-font-roboto *ngSwitchCase="'Roboto'"></app-font-roboto>
</div>

<强>组件

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  fontType: string;

  ngOnInit(): void {
    this.fontType = 'Roboto';
  }
}

只需添加应用程序逻辑即可获取当前字体，并在交换机中为您需要的每种字体样式添加新节点。

Answer 2

您可以通过将css注入dom轻松地做到这一点

const fontUrl = '[get your font url here]';
this.styles = `
@font-face {
  font-family: 'font1';
  src: url(${fontUrl}) format('woff');
}
h1, h2, h3 {
  font-family: font1, sans-serif;
}`

const node = document.createElement('style');
node.innerHTML = this.styles;
document.body.appendChild(node);

使用Angular 2加载动态字体

2 个答案: