i'm live in S.korea and my english is not good
I hope you understand my poor English skills.
my problem is this
Unlike Android 6.0 or later versions, versions differ from version to version.
this is CSS
.box {
width:100px;
}
p {
display: block;
overflow: hidden;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient:vertical;
word-wrap: break-word;
}
.font1 {
font-family: helvetica Neue, sans-serif;
}
.font2 {
font-family: helvetica, sans-serif;
}
this is my code
<div id="test">
<div class="box">
<p class="font1">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
<div class="box">
<p class="font2">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</p>
</div>
</div>
picture
I know that android is no have helvetica font and android 6.0 verion default font 'Roboto' too.
Q1. font-family: helvetica Neue,sans-serif
- Why is there a 'sans', not a font, like 'sans-serif'?
(picture top)
Q2. is that font Droid??
Q3. font-familiy : sans-serif; is wrong?? if i write just only this , font is serif style, but i need sans-serif font! TT.....
Sorry for Not English well. but i need ur help, beacuse i think S.korean people don't know this problem
Q1. font-family: helvetica Neue,sans-serif - Why is there a 'sans', not a font, like 'sans-serif'? (picture top)
Sans-Serif and Serif are two different categories of font, considering Times New Roman and Arial: Times New Roman is a commonly used serif font, where Arial is a commonly used sans-serif font. (Do I understand your question correctly?)
Q2. is that font Droid??
Droid fonts are totally different fonts by Ascender Corporation. They do have Droid Sans or Droid Serif, but they are a different set of fonts designed for small screens.
Q3. font-familiy : sans-serif; is wrong?? if i write just only this , font is serif style, but i need sans-serif font! TT.....
I think you spell it wrong.. try "family" but not "familiy". Otherwise you may be interested in this example:
jsfiddle.net/dsymbwwg
One more hint for communicating in English, try use Google Translate, you can type your question entirely in Korean and get the English result, paste that to us so that we could better understand your situation. :)
Hope that helps.
Related
I recently built a comics website at www.pipanni.com that uses the "Comic Sans" font. Everything is ok so far, except that the font is not showing on my Samsung Galaxy mobile phone. It shows something that looks like Arial.
I've already tried every clear history / cache, etc.
Here's my styles font:
body
{
font-family: "comic sans ms", "comic sans", "Comic Sans", arial, helvetica, tahoma, verdana;
font-size: 18px;
color: #000000;
}
The home page's title is working ok on my laptop (and every other computer I've tested the website on), but not on my smartphone.
I don't have an iphone, but I think it is working ok on those.
What can I try next?
P.S: This is a comics website, it's supposed to use "Comic Sans"! :)
I just found the simple solution for this, you just need to override the font file using font face like so:
#font-face {
font-family: 'Comic Sans MS';
src: url("comic-sans-ms/comici.ttf");
}
and HTML code
<h1 style="font-family: 'Comic Sans MS';">Comic sans</h1>
What happen is browser will override the default font file by using your file. In any devices, the browser will download comici.ttf and render the same font.
p/s: font file you can download from here https://www.wfonts.com/font/comic-sans-ms
To display a font, the device must have this font installed. If not, it uses the fallback you gave to it ( here Arial).
If you want to include a specific font, you can user websites like google font or you could use #Font-face ( look here : http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp )
But be aware that you need the rights to use and install that font.
checkout out font-squirrel. They have an app that will allow you to change a font like comic sans into an embedded font. Very handy for ensuring your look is consistent across all devices.
https://www.fontsquirrel.com/tools/webfont-generator
Go to expert settings and choose base64encode.
It will create a css file that has the embedded font which you include on your css.
I know there are already some fixes but none of them seem to work.
I want to use "Helvetica Neue" with font-weight:300 on my site. It all looks good on Desktop but as soon as I switch to android, there seems to be no light fonts.
Here you can see my test at jsbin.com . Feel free to edit around, on my Galaxy S3 and Nexus 4 the fonts all have the same weight.
As you can see I also tried to include roboto and set it to light but that didn't work either (used some more methodes but didn't want to make an extra H1 for every single one).
My testcase:
<h1 class="neue">Does not work</h1>
<h1 class="neueLight">Does not work</h1>
<h1 class="neueLighter">Does not work</h1>
with this CSS:
h1.neue {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLight {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
h1.neueLighter {
font-family: "HelveticaNeue-Light", "Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: lighter;
}
This worked (only with android 4.2+):
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Helvetica Neue is not available on most devices, including Android (which has a small set of installed fonts).
Regarding Roboto, you seem to be asking for weight 100, but your link element only takes weight 300 into use. And you are referring to the font only in WOFF version, which is not supported by many Android versions.
use font-weight:100
also make sure your font supports different font weight
There seem to be no solution on how one can use a specific light font without a font-face import or using google Fonts.
The solution is using sans-serif-light as first font-family font.
The best solution looks like this:
html:
<h1>Headline</h1>
css:
h1 {
font-family: sans-serif-light,"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 300;
}
Note: this only works with android 4.2+
I have a problem with a mobile website on Android Gingerbread and versions prior to this. Fonts monospace do not exactly behave as monospaces should: different characters have different widths.
This is how it looks on a Gingerbread default web browser (I also tested on Dolphin and Opera mini):
This is how it looks on a ICS default web browser:
I used the Cultive Mono downloaded from the web.
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
CSS:
#my_id span{font:12px 'Cutive Mono', serif; line-height:1.6}
I also tried the default monospace font from the OS:
#my_id span{font:12px monospace; line-height:1.6}
Does anybody know how can this issue be solved? I really need a monospace working on my mobile website.
Thanks in advance.
edit
This would be an example in jsfiddle: http://jsfiddle.net/HerrSerker/dE94s/9/
Found a fix for my case, it's seems that Andorid don't render fonts if one is missing.
this don't work:
font-family: FreeMono, Courier, monospace;
but work if I use:
font-family: FreeMono, Courier, monospace;
font-family: monospace;
In this code probably second rule overwrite the first one.
Just another weird thing with browsers, if anybody explain this or give more details, I'll give him a bounty.
This sample works fine on my 2.3.3 (SDK Lvl 10) android emulator:
http://jsfiddle.net/dE94s/3/
CSS
#import url(http://fonts.googleapis.com/css?family=Cutive+Mono);
.cutive_block {
font-family: 'Cutive Mono', Courier, monospace;
}
.monospace_block {
font-family: monospace;
}
HTML
<div>
Some default text
</div>
<div class="cutive_block">
Some text in cutive mono
</div>
<div class="cutive_block">
And a second line that shows it's monospace
</div>
<div class="monospace_block">
Some text in default monospace
</div>
As you can see in the second and third line which uses your custom font is monospaced.
So I guess just use font-family css attribute with correct fallback font types:
font-family: 'Cutive Mono', Courier, monospace;
as suggested here http://www.w3schools.com/cssref/css_websafe_fonts.asp
I realize it may be late, but I was having trouble with Google Fonts and found a workaround: Mononoki and Adobe's Source Code Pro have all characters, including box drawing.
The problem with Google is that some gliphs are missing.
So I'm developing a site that'll need to function across a multitude of browsers, be they desktop, mobile, or what have you. The designers, as mac designers will often do, have used Helvetica Neue as the font for the entire site. I'm trying to get it working via #font inclusion, and it's showing up just fine.. but the line-heights are giving me an ulcer.
See the below image, this is Arial, Helvetica Neue Std, and Helvetica Neue Pro. Windows Chrome handles all three like a champ, but the rest here are wildly inconsistent. They're all set to line-height 18px right now, I also tried line-height: 1, but to no avail.
The HTML/CSS I'm using for the purposes of this test:
<style type="text/css">
#font-face { font-family: "Helvetica Neue Std"; src: url( 'HelveticaNeueLTStd-Md.otf' ) format( "opentype" ); }
#font-face { font-family: "Helvetica Neue Pro"; src: url( 'HelveticaNeueLTPro-Md.otf' ) format( "opentype" ); }
.box {
float: left;
padding: 10px;
border: 1px solid red;
font-size: 18px;
line-height: 18px;
}
.box .text_1 { font-family: Arial; }
.box .text_2 { font-family: "Helvetica Neue Std" }
.box .text_3 { font-family: "Helvetica Neue Pro" }
</style>
<div class="box">
<span class="text_1">Aw Nuts</span>
</div>
<div class="box">
<span class="text_2">Aw Nuts</span>
</div>
<div class="box">
<span class="text_3">Aw Nuts</span>
</div>
Am I just out of luck here? I'm considering just using Arial at this point, because trying to make toolbars and buttons where the text is vertically centered is proving to be a nightmare. I certainly don't want to sniff for OS and browser and write custom line-heights for every single element.
This looks like a vertival metrics issue. The font will never align right because it has poor vertical metrics. The only way to make the font render consistently across browsers is to fix its vertical metrics.
Most font providers allow you to update and fix vertical metrics for a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments, etc..
Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?
I can offer this in-depth background piece on why line height is a pain.
In summary, different browsers' ways of handling the vertical spacing metrics might be the cause of these inconsistencies. Some calculate from the top of the font's highest ascender and add all line space beneath, while others split the spacing before and after the line of text.
Please try this.
*{
margin: 0px;
padding: 0px;
font-size: 100%;
vertical-align: baseline;
}
font-size: 100% will automatically reset your fonts defaults and you need to manually specify font-size on p a div etc.
Can anyone tell me what are the bundled fonts on most Android devices, specifically for web pages?
Just like Windows has their bundled fonts or Mac font lists, what are the fonts that come with most Android phones and tablets? Can anyone point to a list on the web?
I'm making web pages and want to set up my CSS to degrade gracefully from using newer fonts to just plain ol' "sans-serif" and "serif" font families. Thx.
Expanding upon Grstmo's answer:
system_fonts.xml defines mapping from font-family to actual font files. So let's try these:
<div style="font-family: sans-serif; font-style: normal">Regular</div>
<div style="font-family: sans-serif; font-style: italic">Italic</div>
<div style="font-family: sans-serif; font-weight: bold">Bold</div>
<div style="font-family: sans-serif; font-weight: bold; font-style: italic">Bold-italic</div>
<div style="font-family: sans-serif-light; font-style: normal">Light</div>
<div style="font-family: sans-serif-light; font-style: italic">Light-italic</div>
<div style="font-family: sans-serif-thin; font-style: normal">Thin</div>
<div style="font-family: sans-serif-thin; font-style: italic">Thin-italic</div>
<div style="font-family: sans-serif-condensed; font-style: normal">Condensed regular</div>
<div style="font-family: sans-serif-condensed; font-style: italic">Condensed italic</div>
<div style="font-family: sans-serif-condensed; font-weight: bold">Condensed bold</div>
<div style="font-family: sans-serif-condensed; font-weight: bold; font-style: italic">Condensed bold-italic</div>
<div style="font-family: serif; font-style: normal">Serif Regular</div>
<div style="font-family: serif; font-style: italic">Serif Italic</div>
<div style="font-family: serif; font-weight: bold">Serif Bold</div>
<div style="font-family: serif; font-weight: bold; font-style: italic">Serif Bold-italic</div>
<!-- "Droid Sans" actually gives you Roboto. -->
<div style="font-family: "Droid Sans"; font-style: normal">Droid Sans Regular</div>
<div style="font-family: "Droid Sans"; font-weight: bold">Droid Sans Bold</div>
<div style="font-family: monospace; font-style: normal">Monospace Regular</div>
http://jsfiddle.net/9z3tD/4/ =>
(tested on android 4.2)
EDIT: "Droid Sans" in the screenshot is clearly Roboto.
The config supports it but turns out the underlying file is a simlink: DroidSans.ttf -> Roboto-Regular.ttf, DroidSans-Bold.ttf -> Roboto-Bold.ttf
EDIT: It doesn't seem to matter whether I quote the family names (http://jsfiddle.net/9z3tD/9/ renders the same). CSS distinguishes between generic keywords like serif and quoted "serif" which refers to a font whose name happens to be "serif"; but the xml config makes no distinction so I guess in android either syntax refers to a font whose name is "serif". But there may be a difference if you create a custom WebView and configure it to map generic keywords to other fonts (setSerifFontFamily() and friends).
Then there are fallback_fonts.xml. These have no names; e.g. you CAN'T say font-family: "Droid Sans Fallback".
But all of them are suppossed to be tried for every missing glyph in other fonts. Presumably one can even choose a subset using font-variant of "elegant" or "compact" and by setting text lang="ja"?
However I don't see Droid Sans Fallback being used at all so perhaps fallbacks don't work in WebKit :-(
Disclaimer: The above applies to stock Android, using stock browser and/or Chrome. I believe it also applies to WebView (with default config) but haven't tested.
In theory manufacturers may use other fonts, e.g. I heard rumors Samsung does it. In practice screenshots on all android devices BrowserStack had all — including Samsungs — look to my untrained eyes to be Roboto or Droid, the differences being just android releases...
However here is Galaxy S3 caught not aliasing Georgia to serif so something differs.
Firefox is a good example of a browser doing it differently — they switched to Open Sans and Charis SIL Compact, then replaced Open Sans with Clear Sans.
The full config is in libpref/init/all.js and is language-dependent.
As far as I can tell, Firefox disregards the system_fonts.xml's aliases, e.g. Georgia results in a sans font.
OTOH, older versions (tested 30, 34) allowed you to refer to system fonts by name, even to Droid Sans Fallback but this doesn't work on FF 36, 37 (these 2 results are for http://codepen.io/cben/pen/VYgPEE, use of AdobeBlank means that when you see chars, that font was used).
See also relevant answer about fonts available to apps.
This has been answered here: How to retrieve a list of available/installed fonts in android?
There are only 3 fonts available as part of Android; normal (Droid Sans), serif (Droid Serif), and monospace (Droid Sans Mono).
From Android 4.1 you can use this for example :
font-family: sans-serif-light;
http://www.granneman.com/webdev/coding/css/fonts-and-formatting/default-fonts/#android
Apparently there's only 3 fonts you can specify on pre 4.0 android:
Droid Sans
Droid Serif
Droid Sans Mono
I guess they translate to the default CSS ones (i.e sans-serif, serif, mono)
As I have been tested for a while, there are 3 standard font-family types for WebView:
serif,
sans-serif,
monospace.
I have been loading like below with JavaScript(I have tried different combinations from http://www.w3schools.com/cssref/css_websafe_fonts.asp - table of commonly used combinations):
myWebView.loadUrl("javascript:document.body.style.fontFamily=\"Impact, Charcoal, sans-serif\";");
so, there was no difernce with below code:
myWebView.loadUrl("javascript:document.body.style.fontFamily=\"sans-serif\";");
I've got the same result. Tested on 4.2.2.
Strange but courier also works, looks like kind of monospace.
Post 4.0 Androïd uses "Roboto" Font.
You can find specs from Androïd here :
http://developer.android.com/design/style/typography.html