Question

我创建了一个组件让我预览Google字体。这需要链接到字体样式表。我可以看到样式表被加载但文本没有显示在选定的字体系列中。

```

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

@Component({
selector: 'font-preview',
styles: [
    '.preview { font-family: "{{fontFamily}}"',
    '.title { font-size: 18pt; color: #673ab7;}',
    '.large { font-size: 14pt;}',
    '.normal { font-size: 10pt;}'
    ],
template: `
    <div *ngIf="fontFamily; else noPreview">
        <link [href]="fontLink" rel="stylesheet">
        <div class="preview">
            <div class="title">{{fontFamily}}</div>
            <div class="normal">
            ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽ
            abcčćdđefghijklmnopqrsštuvwxyzž
            1234567890‘?’“!”(%)[#]@/&<-+÷×=>®©$€£¥¢:;,.*
            </div>                
        </div>
    </div>
    <ng-template #noPreview>
        Select a font to preview
    </ng-template>
`
})
export class FontPreviewComponent {

    @Input()
    fontFamily: string;

    constructor(
        public sanitizer: DomSanitizer
    ) {}

    get fontLink(): string {
        if (this.fontFamily) {
            return this.sanitizer.bypassSecurityTrustResourceUrl('https://fonts.googleapis.com/css?family=' + this.fontFamily.replace(' ', '+'));
        }

        return null;
    }
}

```

我理解为什么这不起作用，但我不能想到一个解决方法我可以将iframe用于非角度页面，我猜....：/

Answer 1

修正了它：）

<div [style.font-family]="fontFamily">

不需要样式。

动态样式表链接

1 个答案: