How does one change fonts in web pages for Android? - android

I'm making a simple browser based game using Javascript and HTML4. I have a single page and only two or three text blocks, so I want to avoid a separate style sheet if possible. I am happy to use Android's built in "Droid Serif" But Android ignores this and always defaults to "Droid Sanserif".
Stacoverflow has plenty of advice on adding custom fonts, but I can't find anything on accessing built in fonts.
I define the font-family within a div that surrounds the text. I tried posting the HTML here, but stackoverflow interprets it as formatting and just shows the result, not the code.
My html works fine in all regular browsers, and works fine in Android if I use Google's online fonts, so the structure of the HTML must be fine. But "Droid Serif" and all other font instructions are ignored. Any ideas how to make it behave?

I am assuming you mean that you have a local font file on the device and want to access it through a WebView? The best way is through a ContentProvider, it can serve local assets to a webview including fonts. Here's how to setup the ContentProvider: http://responsiveandroid.com/2012/02/20/serving-android-webview-resources-with-content-providers.html . There are example there for javascript, image files and css files. Following the structure from the tutorial, to get a font you would use something like
#font-face {
font-family: MyFont;
src: url("content://com.github.browep.lfcp/MyFont.ttf")
}
and it would be served from the local filesystem.

Related

Android: add some Chinese characters [duplicate]

I want to use #font-face to import a chinese font into my site. But as we all know chinese fonts are always large.
Since i will only use no more than ten chinese characters one time, i wonder how can i extract several characters from a chinese font?
Tks~
You can use the FontSquirrel web tools to do this: http://www.fontsquirrel.com/fontface/generator
Expert
Subsetting: Custom Subsetting
Single characters
Other than online uploading solutions, there are also offline editors like Fontforge that can do the same task.
For instance you can look at this guide for Fontforge which do the same task.
The main reason why this could be preferrable over online solutions are that, other than more customizable subsettings, there are also no file size restrictions in doing the extraction process locally. It is rather common for Chinese fonts especially for those with large collection of glyphs.

Embedding web font, do I need to include all of these: "ttf, eot, woff and svg"?

I'm using a unique font for a web app that will be built using phone gap and deployed to Android. For android do I need to include all these different formats?
ttf, eot, woff and svg
I would rather not load a bunch of font files if they aren't necessary.
It doesn't hurt, TTF, SVG are widely used, EOT is not supported at all. The browser should only load one font file not all four so it doesn't hurt to have then declared for support sake.
http://caniuse.com/#feat=ttf
http://caniuse.com/#feat=woff
http://caniuse.com/#feat=svg
http://caniuse.com/#feat=eot
If you can can (ie you have font in that format) just use ttf fonts on android.

How to install an additional font in the root directory on an android device

I have developed an application which contains a WebView for loading additional URL contents, but I have an issue.
The issue is that when I load a local language URL, some devices don't support local languages special characters, so some empty squares are shown.
How can I load an additional font in my application or device?
Custom fonts are not that easy in android. You will need some .ttf files, which You must load at runtime as typeface.
This link has nice information, also about best practices, on how to deal with custom fonts properly.
Check out:
Android - Using Custom Font
If your webview is showing an online page (as opposed to a html file which is compiled into the assets somewhere, like Cordova/phonegap does), you perhaps should look at using a web font in the css. The easiest thing to do is uses google have a few hosted, see:
https://developers.google.com/fonts/docs/getting_started#Quick_Start
http://www.google.com/fonts (is the full list of fonts)
Hope that helps. (other webfont options are available).

Android UI : from html to XML

I've developped an application using XML Eclipse tool too build my UI.
Now, i'd like to use a tool like Axure to create a "nicer" interface.
My problem is : is there an easy way to switch from XML to HTML (because Axure is producting HTML file from Wireframe design) ?
And if not, how to "plug" HTML file to the existing application (which is using R.layout.xxx or R.id.xxx to access displayed elements).
I'm quite new in Android by the way...
thanks !
You can't really do what you describe. The way Android layout is specified in XML cannot be compared at all to HTML for websites. Besides, Axure is a mock-up tool. It creates interactive mockups and prototypes - not final solutions for anything.
If you really want to use Axure, perhaps you would want to go for web apps with something like PhoneGap - they are written in HTML and JavaScript, but have less possibilities.

Webview vs. Native Client

I was trying to display a webpage of a url on a plain WebView, and some of the images are not showing. However, everything shows up fine in the browser for the simulator.
Is there a difference between the rendering via WebView vs. the Android 2.3 Browser?
There are several things added to the Android browser. They add things in to handle JavaScript, to handle switching to native functionality for videos, etc. Luckily the Browser is open source so you can get the Android code base and see what they do.
Yes could be a difference. If you are passing the web text-plain to the webview directly it doesn't understand the images which are references depending the local path instead the goblal path reference.
I mean, if you have a <img src="/images/image.png" /> here you are referencing depending on your directory, and the browser try to look up image.png into your root, and if you have <img src="http://www.whatever.com/images/image.png" /> then you are referencing it globaly. So I think this is the main that you could have.

Categories

Resources