如何在 ngx-translate 中为不同的语言使用不同的字体？

Question

我正在使用 Angular 4 和 ngx-translate。我有一个多语言应用程序，我想为其中一种语言使用特殊字体。

这是我的 html 的一部分：

<ngx-datatable-column prop="title">
<ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
  <span (click)="sort()" class="font">{{'IncomingTable.Title' | translate}}</span>
</ng-template>
<ng-template let-value="value" let-row="row" ngx-datatable-cell-template>
 <a (click)="showViewForm(row);showView=true;showIncomingTable=false">{{value}} </a>
</ng-template>

这是scss：

 @font-face {
  font-family: 'IRANSansWeb_Medium';
  src: url($IRANSansWeb_Medium_woff_path) format('woff'),
  url($IRANSansWeb_Medium_woff2_path) format('woff2');
  font-weight: normal;
  font-style: normal;
}

.font{
  font-family:'IRANSansWeb_Medium';
}

我有两种语言，我只想将此字体系列用于一种语言！我该怎么办？

Answer 1

我的建议是在应用组件元素上设置一些类，例如：

<app class="IRANLang"></app>

然后像这样定义css：

app {
  font-family: 'SansWeb_Medium';
}
app.IRANLang {
  font-family: 'IRANSansWeb_Medium';
}

当然，您希望订阅 Router 的 NavigationEnd 事件以检查语言更改，或者将 TranslateService 的 useLang 方法包装到您要设置应用样式的位置。

更新

export class AppComponent {
  private _selectedLang: string;    

  constructor(private translate: TranslateService) { 
    // ... you language initialization here
    // please set this._selectedLang to your default language
  }

  @HostBinding('class.IRANLang')
  get iranLangClass() {
    return this._selectedLang === 'fa'; // or some other language code
  }

  changeLanguage(lang: string) {
    this.translate.use(lang);
    this._selectedLang = lang;
  }
}