2017-08-29 143 views
1

嘿,是否可以使用Angular 2.4動態加載字體?我嘗試了以下,但它不起作用。使用Angular 2動態加載字體

<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(未找到)

未處理無極抑制:未能加載URL(%7B%7B% 20font.url%20%7D%7D);區域:;任務:Promise.then;價值:無法加載URL(%7B%7B%20font.url%20%7D%7D)

+0

相同的錯誤:/ 我認爲角嘗試評估之前的結合完成 –

+0

'URL表達({{字體.URL}})' – Swoox

+0

不,我甚至試圖 <風格* ngIf = 「字體」 > –

回答

2

您可以創建在你的根組件爲每個字體樣式compononent,並導入符合以下條件:

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'; 
    } 
} 

只需添加應用程序邏輯來得到當前字體和開關添加新節點爲需要的每個字體樣式。

+0

感謝您的答案,但我的問題是,我們的客戶可以上傳自己的字體,所以我無法爲ea創建組件可能的字體:( –

+2

好吧,我明白了。我會嘗試使用jQuery來解決它,在獲取當前客戶端的字體後添加字體系列。指向網站內容中的靜態文件。 –