Angular 2 动态字体加载

Posted 2023-03-06

【中文标题】Angular 2 动态字体加载

【英文标题】：Dynamic font loading with Angular 2

【发布时间】：2018-02-06 23:19:43

【问题描述】：

嘿，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'
    ;
  

它生成以下控制台输出：

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

未处理的 Promise 拒绝：无法加载 url(%7B%7B%20font.url%20%7D%7D) ;区域：;任务：Promise.then；值：加载url失败(%7B%7B%20font.url%20%7D%7D)

【问题讨论】：

同样的错误：/我认为 Angular 在绑定完成之前会尝试评估表达式

url(font?.url)

不，我什至试过

***.com/questions/35882670/…

在 <div [style.url]="url"></div> 和组件中 this.url= 'test.woff'

【参考方案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';
  

只需添加您的应用程序逻辑以获取当前字体并在 switch 中为您需要的每种字体样式添加新节点。

【讨论】：

感谢您的回答，但我遇到的问题是我们的客户可以上传自己的字体，因此我无法为每种可能的字体创建组件:(

好的，我知道了。我会尝试使用 jQuery 来解决它，在获取当前客户端的字体后添加字体系列。指向站点内容中的静态文件。

@LeonardoOliveira “我会尝试使用 jQuery 来解决它，在获取当前客户端的字体后添加字体系列。指向站点内容中的静态文件。” - 你能详细说明一下吗？

我可以在 SCSS 文件中动态更改 URL，例如“src: url("/assets/fonts/Roboto/Roboto-Bold.eot");"我希望它制作动态加载网址

【参考方案2】：

你可以通过在你的 dom 中注入 css 来轻松做到这一点

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);