根据不同的语言更改字体？答案

【问题标题】：Change font according to different languages?根据不同的语言更改字体？
【发布时间】：2019-03-02 00:44:15
【问题描述】：

我在 angularJs 中有一个应用程序，我需要支持三种语言，并且对于每种语言我需要使用不同的字体。我正在使用 angular-translate 来更改语言，它工作正常。当语言改变时我也需要改变字体，所以我做了什么，我使用了 CSS 变量，当语言改变时，我用字体名称改变变量值。它工作正常，然后我才知道 CSS 变量在 IE 中不起作用。然后我决定使用另一种方法来做到这一点。我找到了this，我想如果我有这样的字体：

@font-face {
    font-family: 'Regular';
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'), local('Roboto-Regular'), url('../fonts/roboto-regular-webfont.woff2') format('woff2'), url('../fonts/roboto-regular-webfont.woff') format('woff');
    font-display: block;
}

我将添加具有相同名称和不同 src 的新样式。但是有一个问题是，每当我更改语言时，我都必须添加具有不同 src 的新样式。那么有没有办法使用javascript删除CSS中的字体，或者有没有办法更新或编辑字体src？或者任何人都可以告诉我另一种方法（当语言改变时，字体也应该改变）。

【问题讨论】：

字体在某个类中，所以只需使用语言更改类。尝试使用ng-class="{'class-en': lang == 'english', 'class-pk': lang == 'pakistani'}"等。
我已经考虑过了，但我有很多 css 类，其中设计师特别提到了字体系列。

标签： javascript css angularjs fonts angular-translate

【解决方案1】：

尝试在控制器中插入以下代码：

app.controller("bodyController", ($scope) => {
    $scope.lang_fonts = {};
    $scope.lang_fonts["en"] = "font-name";
    $scope.lang_fonts["sp"] = "font-name-2";
    $scope.current_lang = "en";
    document.getElementsByTagName("body")[0].style.fontFamily = $scope.lang_fonts[$scope.current_lang];
    //$("body").css("font-family", $scope.lang_fonts[$scope.current_lang]); // using jQuery
})

【讨论】：