Как загрузить собственный шрифт и использовать его в angular 6 динамически - PullRequest
Новая
       23

Как загрузить собственный шрифт и использовать его в angular 6 динамически

0 голосов
/ 14 февраля 2019

Я работаю в проекте Angular 6, и мне нужно предоставить функциональность загруженного пользователем шрифта и использовать его.

Я также попробую следующий код: 

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>

Но этот кодпокажите мне ошибку в двух местах

1) не удается найти имя FontFace (объект FontFace не поддерживается в угловых значениях)

2) Свойство 'fonts' не существует для типа 'Document'.(объект document.font не поддерживается в угловом формате)

Вот скрипта, работающая в js, но не работающая в машинописном тексте: http://jsfiddle.net/Mark_1998/xvpk0rnm/3/

Есть ли альтернатива динамической загрузке шрифта в угловом формате.пожалуйста, помогите мне.

1 Ответ

0 голосов
/ 14 февраля 2019

1.Существующая ссылка CSS

Предположим, что ваш веб-шрифт является внешним CSS, например Google Font , Adobe Typekit или вашим собственным URL-адресом CSS.

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

In 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, если вы хотите, чтобы стиль применялся к подкомпонентам.

2.Не существует CSS

Допустим, вы разрешаете пользователю загружать шрифт в firebase storage и запускать cloud functions.Firebase позволяет вам написать новый CSS для /tmp, загрузить на firebase storage и вернуть URL.Реально зависит, какой сервер и язык вы используете.

3.Использование FontFace (не рекомендуется)

В 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.Существует проблема кросс-браузерной поддержки.

...