如何在Angular 4的ngx-translate中为不同语言配置不同字体？

我来帮你搞定这个多语言字体的问题！结合Angular 4和ngx-translate的特性，我们可以通过动态判断当前语言来实现仅给指定语言应用特殊字体的需求，下面是两种实用的实现方案：

这种方式针对你模板里的特定元素，根据当前语言条件添加字体类：

1. 组件中注入TranslateService并监听语言变化 #

首先在你的组件代码里引入并注入TranslateService，同时保存当前语言状态，还要监听语言切换事件来实时更新：

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements OnInit {
  currentLang: string;

  constructor(private translate: TranslateService) {
    // 获取初始激活的语言
    this.currentLang = this.translate.currentLang;
  }

  ngOnInit() {
    // 订阅语言切换事件，实时更新当前语言
    this.translate.onLangChange.subscribe(event => {
      this.currentLang = event.lang;
    });
  }

  // 保留你原有的sort()、showViewForm()等方法
}

2. 模板中用ngClass动态添加字体类 #

修改你的HTML模板，给需要应用特殊字体的元素加上[ngClass]，判断当前语言是否为目标语言（比如波斯语fa），匹配时才添加.font类：

<ngx-datatable-column prop="title">
  <ng-template let-column="column" let-sort="sortFn" ngx-datatable-header-template>
    <span 
      (click)="sort()" 
      [ngClass]="{'font': currentLang === 'fa'}"
    >{{'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"
      [ngClass]="{'font': currentLang === 'fa'}"
    >{{value}}</a>
  </ng-template>
</ngx-datatable-column>

3. 保留原有SCSS代码 #

你已经写好的@font-face和.font类完全不用改，只有当语言匹配时，这个类才会生效。

如果你的应用中有很多地方需要给目标语言设置特殊字体，这种全局方式更高效：

1. 根组件中给body添加语言标识类 #

在AppComponent（根组件）中注入TranslateService，给页面的body元素动态添加当前语言的类名，同时监听语言切换更新类名：

import { Component, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: './app.component.scss'
})
export class AppComponent implements OnInit {
  constructor(private translate: TranslateService) {}

  ngOnInit() {
    // 初始化时给body添加语言类
    document.body.classList.add(`lang-${this.translate.currentLang}`);
    
    // 语言切换时更新body的语言类
    this.translate.onLangChange.subscribe(event => {
      // 先移除旧的语言类
      document.body.classList.remove(`lang-${this.translate.currentLang}`);
      // 添加新的语言类
      document.body.classList.add(`lang-${event.lang}`);
      // 更新当前语言记录
      this.translate.currentLang = event.lang;
    });
  }
}

2. 修改SCSS，针对特定语言类应用字体 #

调整你的SCSS代码，只有当body带有目标语言类时，才应用特殊字体：

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

// 仅当body有lang-fa类时，给带.font的元素应用特殊字体
body.lang-fa .font {
  font-family:'IRANSansWeb_Medium';
}

// 如果想给整个页面的文本都应用这个字体，可以改成：
// body.lang-fa {
//   font-family:'IRANSansWeb_Medium';
// }

3. 模板无需修改 #

保持你原来的HTML模板不变，只要元素带有.font类，当切换到目标语言时就会自动生效。

两种方案都能完美实现你的需求，第一种适合局部元素，第二种适合全局批量应用，你可以根据自己的实际场景选择~

内容的提问来源于stack exchange，提问作者fariba.j