如何使用 AngularJS i18n 为不同的语言定义不同的字体？

Question

我正在使用Angular-i18n。我的页面是这样的：

<div translate="main.logged.message" translate-values="{username: '{{account.login}}'}">

我想将 font-familyLato用于英文和Microsoft Yahei中文。

我试过了：

:lang(zh) {
    font-family: 'Microsoft Yahei';
}

但它不起作用。还检查了文档：http : //angular-translate.github.io/docs/#/guide。我找不到解决方案。

如何制作？

---

更新：

我发现了一个帖子http://yukikodesign.com/orangutangy/?p=191，说：

首先指定英文字体，然后是字体列表中的中文字体。这使得英文字体使用您想要的字体呈现，然后中文字体接收其他字符。

就像是： font-family: "Lato", "Microsoft Yahei";

令人惊讶的是，它有效！但这似乎不是一个通用的解决方案。还有更好的吗？

Answer 1

您可以将变量“lang”添加到 rootscope，然后通过读取 cookie 或本地存储或读取浏览器设置（无论采用哪种方式）来设置此变量。基于此变量，您可以将 language class='{{lang}}' 添加到与 ng-app 属性相同的元素中。然后你可以根据这个类来改变你的字体。如果您提供使用 $translate.use 通过函数动态更改语言，那么还可以更改 rootscope 上的变量“lang”，并将更改写回持久层，例如 cookie 或本地存储。

app.controller('Ctrl', ['$translate', '$scope', '$rootScope',
  function($translate, $scope, $rootScope) {

    //better set this in your run function based 
    //on your cookie or localstorage  
    $rootScope.lang = "en";  


    $scope.changeLanguage = function(langKey) {
      $translate.use(langKey);
      $rootScope.lang = langKey;
      //persist to cookie or localstorage here
    };
  }
]);

http://plnkr.co/edit/SnDjGceqNosrkwxflvh7?p=preview