I have a simple line of text
<h4>This is just some placeholder junk</h4>
with the following CSS:
h4 {
font-size:20px;
color:#000000;
font-style:italic;
}
This is working in everything but the default browser on Android GS3.
I've tried wrapping the text in a span with font-style:italic;, as well as including <i> and <em> tags, but the font will not slant. Am I overlooking something simple here?
In terms of performance I would not recommend to use a custom font on mobile devices at all, unless there is really no other way. But this seems to be a problem caused by Samsung: https://code.google.com/p/chromium/issues/detail?id=169446#c11
So I think this is one of the rare situations where you should go with a custom font. Of course it should be a custom font that supports the italic font style. Don´t forget the font-styleproperty in the #font-face declaration.
#font-face {
...
font-style: italic, oblique;
}
Related
I want to style some HTML with a condensed font. I want to use built-in fonts, not webfonts. For Apple devices, I can just write font-family: AvenirNextCondensed-Medium, but on Android, declarations like font-family: "Roboto Condensed", font-family: Roboto-Condensed or font-family: RobotoCondensed don't work, even though Roboto Condensed is preinstalled on Android.
I also tried specifying Roboto and using font-stretch: condensed. No dice.
Is there any way to write my CSS so that Android devices use their built-in Roboto Condensed font?
Answering my own question here:
You have to use the nonstandard sans-serif-condensed keyword, like so:
h1 { font-family: AvenirNextCondensed-Medium, HelveticaNeue, sans-serif-condensed, sans-serif; }
Note that sans-serif-condensed has to come before sans-serif and any other font names recognized by Android. For example, if you put Arial before sans-serif-condensed, Android will just use Arial (or actually its substitute for it).
For other versions of Roboto (Thin, Light, Medium, etc.), the font names listed in this StackOverflow answer should probably work.
I possess two complementary fonts that are installed on my computer (Linux), and that are used to render every characters that the two fonts have.
I would have liked to use in the same way these fonts in Android. Unfortunately, I don't know how to do this (I know how to load one font).
I have tried to merge them with FontForge, but unfortunately I couldn't because the total number of glyphs is over 65535 glyphs (which is the limit of the sfnt format).
Is there a possibility to go over 65535 glyphs, so that the font can be used in Android?
If not, is there a way to use these fonts conjointly in Android in general, so that the characters not recognized by a font are recognized by the other (like my computer does)?
If not, is it possible to use two Typeface in a TextView, so that the characters not recognized by a font are recognized by the other?
I know that we can use Spannable to use different Typeface for different parts of the TextView, but that's not exactly my need here.
If not, is it possible to detect all the unrecognized characters of my TextView, so as to use the other font only for them?
Is it possible to use the CSS style "font-family" in a TextView, so as to provide an alternative font in the case the first fails for some characters?
Thanks to the direction given by JaiSoni, I have managed to find a way to solve my problem using HTML and CSS : I have used a WebView, and have declared the #font-face to define my fonts. Then, I have used them in the CSS attribute "font-family" like this :
<style type="text/css">
#font-face {font-family: MyFont; src: url("file:///android_asset/fonts/font.ttf")}
#font-face {font-family: MyFont2; src: url("file:///android_asset/fonts/font2.ttf")}
body {font-family: MyFont2, MyFont; }
</style>
Thank you very much.
Okay, so I am creating this mobile website where I am trying to change the font-size and color of some text. Now, I have tested my code on my PC, iOS and Android (using Chrome browser) and only on the Android there seems to be a problem. When using an imported CSS document some settings will not change, but if I type then in directly into the element using the "style" attribute everything works.
Font
The font-size seems to have different levels as when I type in:
font-size: 31px;
it gives me this:
Hello
However if I were to change it to:
font-size: 30px;
the font size will now be like this:
Hello
Color
Also, the color on Android never seems to change as the color is always black. I have tried changing it to both other dark and bright colors without any success (note the colors are changing on both my PC and on iOS).
Override
I am thinking that there might be some sort of snippet of code which would override these default settings. If anyone of you have found one when importing CSS to a PHP/HTML doc or have any other solution it would gladly be appreciated!
your style is overwritten by some other CSS class or css styling use:
font-size: 30px !important;
thereby your styling will be applied over all other stylings thereby overwriting all predefined stylings
I have this in my CSS:
.like-counter span, .entry-content h2 {
color: #444;
font-family: Bitstream Charter, "Droid Serif", Gerogia, serif;
font-weight: bold;
}
In my computer, I see a serif font. If I remove the first one, then I see the Droid Serif font. I thought this font was a default font in Android devices.
But when I open the site on my Android phone. I'm still seeing Droid Sans.
What could be causing this?
EDIT:
I discovered that the problem only happens when I display the page in Android's default browser. In Firefox, I can see the Droid Serif font (strange).
Instead of guessing the default fonts, you can just use the generic serif font:
font-family: serif;
serif will be the browser's default serif font.
On older Android systems (until a version that I'm not aware of) the browser instead of checking the full list of possible fonts, it checks the very first entry of the font family, and if it is known to the browser, what to substitute it with, then it will use that, otherwise it will throw away the whole list.
This is notable, if you just use Times for example, it will use Droid Serif, but if you add some fancy font before it, it will use Droid Sans, regardles of the rest.
Obviously it will work, if you put the “serif” in first place, but then all the browser use the default serif font, instead of whatever you want. Because of the simplicity of the font selection on older Android, you can add a "serif" family to the first place, which will be interpreted as Droid Serif on the old Android, but other browsers will look (and hopefully fail) for a font named “serif”.
Also—interestingly—none of the Droid fonts are known to those Android browser.
I am trying to display phonetic symbols in a WebView, but so far I am only getting squares.
For instance, for the word "apostrophe", this should be displayed:
əˈpåstrəfi
but all I am getting on the display is:
□□påstr□fi
If it would help, I am getting the strings from an SQLite database. The string I retrieve has some HTML tags in it, so I use this:
webView.loadDataWithBaseURL("file:///android_asset/",
article, "text/html", Encoding.UTF_8.toString(), null);
where I have my CSS files in /assets. And the article variable contains some text enclosed in HTML tags.
I've resolved problem to display phonetic symbols in TextView. The problem is the default android fonts are not implement IPA symbols. I can advise to use ccs like this
#font-face {
/* Regular */
font-family: "ConstructiumRegular";
src: url("http://openfontlibrary.org/content/RebeccaRGB/412/Constructium.ttf") format("truetype");
font-weight: 400;
font-style: normal;
font-variant: normal;
font-stretch: normal;
}
In me case mentioned Constructium.ttf fits.
If you pick up a unicode font like Gentium,
and you make sure you can change your font with a utility like this, you should be good to go. I don't have an Android, so there may be issues surrounding types of fonts that can be installed. You may need to check into that, or the font install utility that I've cited may not work well for you. ymmv