Question

我使用角度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';
}

我有两种语言，我想只使用一种语言的font-family！我该怎么办？

Answer 1

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

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

然后像这样定义css：

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

当然，您希望订阅路由器的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;
  }
}

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

1 个答案: