Question

我正在使用Angular-i18n。我的页面就像：

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

我想将font-family Lato用于英语，将Microsoft Yahei用于中文。

我试过了：

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

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

如何制作？

更新

我找到了帖子http://yukikodesign.com/orangutangy/?p=191，说：

首先指定英文字体，然后在字体列表中指定中文字体。这样就可以使用你想要的字体渲染英文字体，然后中文字体会选择其他字符。

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

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

Answer 1

您可以添加变量＆＃39; lang＆＃39;通过读取你的cookie或localstorage或者通过读取浏览器设置（无论你走的路）来设置这个变量。根据此变量，您可以添加语言类=＆＃39; {{lang}}＆＃39;与ng-app属性相同的元素。然后，您可以根据此类更改字体。如果您提供使用$ translate.use通过函数动态更改语言，那么也可以更改您的变量＆＃39; lang＆＃39;在rootscope上，将更改写回到持久层，如cookie或localstorage。

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

Answer 2

这里我使用AngularJS i18n为我的程序添加了外部字体样式：您可以使用css组件轻松实现此目的。

这是我的index.html文件（我只包含了重要的部分）

    <html ng-app="starter" class="{{lang}}">

   <ion-header-bar class="bar-stable">
     <h1 class="ng-binding {{lang}}">{{ "hello_message" | translate }}</h1>
   </ion-header-bar>

这是我的CSS文件

@font-face {
font-family: 'DL-Araliya..';
src: url('../fonts/DL-Araliya...eot');
src: url('../fonts/DL-Araliya...eot?#iefix') format('embedded-opentype'),
    url('../fonts/DL-Araliya...woff') format('woff'),
    url('../fonts/DL-Araliya...ttf') format('truetype');
font-weight: 100;
font-style: normal;}

.si {
        font-family: 'DL-Araliya..';
        font-weight: 100;
        font-style: }

这是我的app.js文件

angular.module('starter', ['ionic', 'pascalprecht.translate'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
  // Hide the accessory bar by default (remove this to show the accessory     bar above the keyboard
  // for form inputs)
  cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

  // Don't remove this line unless you know what you are doing. It stops the viewport
  // from snapping when text inputs are focused. Ionic handles this internally for
  // a much nicer keyboard experience.
  cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
  StatusBar.styleDefault();
}
});
})

// translations for english language
.config(function($translateProvider){
$translateProvider.translations("en", {
hello_message: "Hello Sri Lanka",
});

// translations for sinhala lanugage
$translateProvider.translations("si", {
hello_message: "wdhqfndajka Y%s ,xld",
})

 // translations for tamil lanugage
 $translateProvider.translations("ti", {
 hello_message: "ஹலோ இலங்கை",
})

// default langugae when the application starts
$translateProvider.preferredLanguage("en");
 // if the called element is not found this will be set as the default    langugae
$translateProvider.fallbackLanguage("en");

})

// controller for button actions
.controller('Ctrl', function($translate, $scope, $rootScope) {

$scope.changeLanguage = function (langKey) {
  // langKey is whether si/ti/en

$rootScope.lang = langKey;
  // console.log("debug " + $rootScope.ti);
 $translate.use(langKey);
 $rootScope.lang=langKey;
 };

});

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

2 个答案: