如何使用AngularJS i18n为不同语言定义不同的字体？
如何使用AngularJS i18n为不同语言定义不同的字体？
提问于 2015-02-05 09:01:45
我正在使用角-i18n。我的页面是：
<div translate="main.logged.message" translate-values="{username: '{{account.login}}'}">我想使用字体-家庭Lato的英语和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";
令人惊讶的是，它起作用了！但这似乎不是一个通用的解决方案。还有更好的吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-02-05 10:29:45
您可以在根范围中添加一个变量'lang‘，然后通过读取cookie或本地存储空间或通过读取浏览器设置(无论以何种方式)来设置该变量。基于这个变量，您可以将语言class=‘{lang}}’添加到与ng-app属性相同的元素中。然后您可以根据这个类更改字体。如果您提供通过使用$translate.use的函数动态地更改语言，那么还可以更改根范围上的可变“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
};
}
]);Stack Overflow用户
发布于 2016-07-14 11:35:28
在这里，我已经在我的程序中包括了使用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;
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28339838
复制相关文章
相似问题
腾讯云开发者
