Menu
I am using Angular-i18n. My page is like:
<div translate="main.logged.message" translate-values="{username: '{{account.login}}'}">
I would like to use font-family Lato for English and Microsoft Yahei for Chinese.
I have tried:
:lang(zh) {
font-family: 'Microsoft Yahei';
}
But it is not working. And also checked the Doc: http://angular-translate.github.io/docs/#/guide. I cannot find the solution.
How to make it?
Update:
I found a post http://yukikodesign.com/orangutangy/?p=191, saying:
Specify English fonts first and then the Chinese fonts in your font list. This makes it so English fonts render with your desired fonts then the Chinese fonts pick up the other characters.
It's like: font-family: "Lato", "Microsoft Yahei";
Surprisingly, it works! But it seems not a generic solution. Any better one?
279
Here i have included external font style to my Program using AngularJS i18n: You can achieve this easily using css components.
This is my index.html file (I have only included the important parts)
<html ng-app="starter" class="{{lang}}">
<ion-header-bar class="bar-stable">
<h1 class="ng-binding {{lang}}">{{ "hello_message" | translate }}</h1>
</ion-header-bar>
This is my CSS file
@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: }
Here is my app.js file
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;
};
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
