I'm trying to change the font of web pages loaded in to a Browser app developed for Android. Currently my custom font is hosted in a URL & I access the font from there by injecting a JavaScript to the page to change the style sheet (CSS) font face.
Here is the current code:
var css = '@font-face {font-family: "dhanika"; src: url(http://www.sample.lk/DhanikaWeb.ttf);} si {font-family: "dhanika"}';
var style = document.getElementsByTagName("style")[0];
style.appendChild(document.createTextNode(css));
This code works perfectly. But it takes some time to load the font from the URL. And also it is not good to load the font each time since it may incur data charges.
Therefore开发者_如何学Go I wanna know weather there is a method to access my custom font from the JavaScript, if I place my font in my app's 'Assets' folder. Glad if anyone can provide the code.
Any help is appreciated!
From what I know about Android and @font-face, Android currently chokes on the local()
declaration. The best method for using @font-face with all browsers is to use double declarations. Example
@font-face { font-family:'fontName'; src:url('fontName.eot'); font-weight:normal; font-style:normal; }
@font-face { font-family:'fontName'; src:url(//:) format('no404'), url('fontName.woff') format('woff'), url('fontName.ttf') format('truetype'), url('fontName.svg') format('svg'); font-weight:normal; font-style:normal; }
The Easiest way to do this is to use FontSquirrel's @font-face generator
精彩评论