如何上传自定义字体并在angular 6中动态使用它 [英] How to upload custom font and use it in angular 6 dynamically

问题描述

我正在从事angular 6项目，需要提供用户上载字体的功能并使用它.

I am working in angular 6 project and I need to to give functionality of user uploaded font and use it.

我也尝试了以下代码:

var junction_font = new FontFace('example_font_family', 'url(https://fonts.gstatic.com/s/gloriahallelujah/v9/LYjYdHv3kUk9BMV96EIswT9DIbW-MIS11zM.woff2)');
        junction_font.load().then(function (loaded_face) {
          document.fonts.add(loaded_face);
        }).catch(function (error) {
            console.log('error : ', error);
        });

HTML:
<p style="example_font_family">Lorem Ipsum</p>

但是这段代码在两个地方向我显示了一个错误

But this code show me an error at two place

1)找不到名称FontFace(FontFace对象不支持尖角)

1) cannot find name FontFace (FontFace object not supprted in angular)

2)类型文档"上不存在属性字体". (document.font对象不支持斜角)

2) Property 'fonts' does not exist on type 'Document'. (document.font object not supprted in angular)

在这里，小提琴手在js中工作，但在打字稿中却不工作: http://jsfiddle.net/Mark_1998/xvpk0rnm/3/

Here is fiddle working in js but not working in typescript: http://jsfiddle.net/Mark_1998/xvpk0rnm/3/

有没有其他方法可以动态地按角度加载字体. 请帮助我.

Is there any alternative for load font dynamically in angular. please help me.

推荐答案

1.现有的CSS链接

假设您的网络字体是外部CSS，例如 Google字体，

1. Existing CSS link

Assume your web font is an external css like Google Font, Adobe Typekit or your own css url.

在app.component.ts中，

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

  // Change whatever your like
  public link = "https://fonts.googleapis.com/css?family=Noto+Sans+TC"


  constructor(
    private sanitizer: DomSanitizer
  ) {
    this.sanitizer = sanitizer;
  }

  getFontCSS() {
    return this.sanitizer.bypassSecurityTrustResourceUrl(this.link);
  }
}

在app.component.html

<link [href]="getFontCSS()" rel="stylesheet">
<p [ngStyle]="{'font-family': 'Noto Sans TC'}">Lorem ipsum</p>
<p [ngStyle]="{'font-family': 'Arial'}">Lorem ipsum</p>

此外，如果要将样式应用于子组件，则可能需要使用ViewEncapsulation.None.

Also, you may need to use ViewEncapsulation.None if you want the style apply to sub-components.

假设您允许用户将字体上传到firebase storage并触发cloud functions. Firebase允许您向/tmp编写新的CSS，然后上传到firebase storage并返回URL.确实取决于您使用的服务器和语言.

Say you allow user to upload the font to firebase storage and trigger a cloud functions. Firebase allow you to write a new CSS to /tmp and upload to firebase storage and return a URL. Really depends which server and language you use.

在app.component.ts中，

import { Component } from '@angular/core';
declare let FontFace: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  constructor() {
    this.loadFont()  
  }

  loadFont() {
    let customFont = new FontFace('barCode', 'url(https://fonts.gstatic.com/s/felipa/v6/FwZa7-owz1Eu4F_AT96F.woff2)');
    customFont.load().then((res) => {
      document['fonts'].add(res);
    }).catch((error) => {
      console.log(error)
    })
  }
}

在app.component.html中，

<p [ngStyle]="{'font-family': 'barCode'}">Lorem ipsum</p>

由于FontFace是一项实验技术，Working Draft，因此不建议这样做.存在跨浏览器支持问题.

This is not recommended yet as FontFace is an experimental technology and Working Draft. There is cross-browser support issue.

这篇关于如何上传自定义字体并在angular 6中动态使用它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！