I'd like to use css syntax in HTML document to set the font-family to "Arial" and font-size to 0.3cm for the whole document.
I use this code:
<style>
body { font-family: Arial; font-size: 0.3cm }
</style>
I am not sure if writing only Arial is enough, or should I write something like this?
<style>
body { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 0.3cm }
</style>
and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?
thanks
font-family: Arial
This means the browser will use Arial if you have it installed on your system. If not, it will use whatever the default font is for your browser.
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif
This means the browser will use Arial if you have it installed on your system. If not, it will use Helvetica Neue if you have it installed on your computer. If not, it will use Helvetica if you have it installed on your computer. If not, it will use whatever the default sans-serif font is for your browser.
Both are perfectly valid. They just do slightly different things.
and I am also not sure if I cam use "cm" in the code
Yes, cm is a valid CSS unit of measurement.
I am not sure if writing only Arial is enough, or should I write something like this?
You can use Arial alone but It is advisable to use font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; Just is case Arial can not be used.
and I am also not sure if I cam use "cm" in the code, I mean it works in the browser but is it correct "code-wise" ?
You can use cm but It seems it is recommended only for print by w3.org,check this link http://www.w3.org/Style/Examples/007/units.en.html
The recommended units for font size are em, px, %,rem
The font-size property can accept values of type length. As of the time of writing, the exhaustive list of these types (excluding experimental units) is:
em, ex, ch, rem, vh, vw, vmin, vmax, px, mm, cm, in, pt, pc
So, yes. You can use cm (centimeters) as a unit for that property. You should be aware, though, that 1cm rarely equals one true centimeter on screen, due to differing pixel densities on various displays. If that's really what you want, you could use the mozmm unit of measurement, although it is an experimental unit that is only supported by Firefox browsers. The cm unit is used more often in stylesheets targeted at physical printed media.
The font-family property accepts a stack (comma-separated list) of font family names. The browser will use the first one in the stack that it happens to recognize (installed on the computer).
Using font-family: Arial is a pretty safe bet, since almost all computers have the Arial font, but to be safe it is best to include a couple of fall-back fonts. Quotation marks (or single-quotes) are traditionally used around multi-word font names or font names with numbers or symbols in them. It is also considered best-practice to include a <generic-name> at the end of the list. The exhaustive list of generic fonts is:
serif, sans-serif, monospace, cursive, fantasy
So, the second option you listed for font-family is a little bit more "bulletproof". It lists some fall-back options and ends with a generic font in case the client has none of the hand-picked fonts installed.
Related
Could someone clarify why the below font style settings is not working in chrome, but working in IE and FireFox.
My website has the same problem, it does not pick up the CSS font settings (where normal is mentioned), hence I tested with the CSS test environment from W3Schools and the behavior is same.
CSS Snippet:
Working only in IE/FireFox: font-family: Arial, Helvetica, sans-serif normal;
Working in All Browsers: font-family: Arial, Helvetica, sans-serif;
Try in Chrome and IE to see difference.
body {
font-family: "Times New Roman", serif;
}
p.serif {
font-family: Arial, Helvetica, sans-serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in Arial Without Normal.</p>
<p class="sansserif">This is a paragraph, shown in Arial With Normal</p>
Below are the questions:
Could you clarify why the behavior difference between these two browsers?
How to ensure my CSS font styles are picked by Chrome and IE/FireFox (Should I remove normal from all my CSS files or is there any better way to do it)?
Arguably invalid font-family declaration
If you open your browser's inspector (Ctrl+Shift+i in Chrome) you will see that the CSS rule
p.sansserif {
font-family: Arial, Helvetica, sans-serif normal;
}
is not applied.
Per the CSS specifications, an invalid rule is ignored, and whatever would have been applied (backwards up the cascade) is applied instead or more accurately, not overruled.
The result is "Times New Roman" in this case - as seen in the "Computed Styles".
To set the font-style (-variant, -weight, -stretch or line-height (whichever you were trying to set to normal)) of text, we can either use exactly that, or use the font shorthand.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family...
(with caveats).
As for the difference between IE(and FF) and Chrome
Chrome recognises in the comma delimited assertion that sans-serif normal is not a font-family, whereas IE doesn't.
If you simplify the rule to:
p.sansserif {
font-family: sans-serif normal;
}
and view the result in IE, you'll see the <p> is in "Times New Roman" since, although IE accepts the declaration, it can't do anything sensible with it.
More from the specs:
...it is recommended to quote font family names that contain white space, digits, or punctuation characters other than hyphens.
Font family names that happen to be the same as a keyword value (‘inherit’, ‘serif’, ‘sans-serif’, ‘monospace’, ‘fantasy’, and ‘cursive’) must be quoted to prevent confusion with the keywords with the same names.
So it is recommended that a font family called sans-serif normal be quoted as "sans-serif normal".
And if a font family is using the same name as a keyword it must be quoted.
Both Chrome and IE will accept Comic Sans MS or Times New Roman etc. with or without quotes, and apply them correctly.
Chrome rejects the unquoted use of the keyword sans-serif where it finds it combined with normal, but will accept both if quoted, although it won't be able to apply that font unless it can find one with that name.
IE accepts sans-serif normal as a possibly unquoted font family name, and this is arguably correct, since the keyword is only part of the presumed family name, rather than the whole thing.
Chrome, arguably incorrectly, rejects what it presumes is a malformed assertion.
or p.font{
font-family: font;
align-text: center;
}
For a project I download a template. In its style.css font family was defined as
body {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
}
arial , sans-serif, Helvetica Neue are different font families then why font-family in css is defined as above.
Not all browsers support all the fonts.
So, giving multiple font families select the font that is supported by the browser, starting from the first font. If first font is supported then it is used, otherwise it checks if next font is supported and so on. The leftmost font that is supported is used.
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
In this case, Lato is not supported by all browsers. So, next font Helvetica Neue is checked.
You'll also notice that the last fonts are common, that are supported by all browsers Arial and sans-serif in this case.
FROM MDN
The font-family CSS property lets you specify a prioritized list of font family names and/or generic family names for the selected element. Values are separated by a comma to indicate that they are alternatives. The browser will select the first font on the list that is installed on the computer or that can be downloaded using a #font-face at-rule.
Web authors should always add at least one generic family in a font-family list, since there's no guarantee that a specific font is installed on the computer or can be downloaded using a #font-face at-rule. The generic family lets the browser select an acceptable fallback font when needed.
It is a kinda like a backup if the browser won't support the first font it jumps
to the second
From W3 schools
The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
There are two types of font family names:
family-name - The name of a font-family, like "times", "courier", "arial", etc.
generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive", "fantasy", "monospace".
http://www.w3schools.com/cssref/pr_font_font-family.asp
What font used when I don't have that font?
Example:
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow: 400' rel='stylesheet' type='text/css'>
<style>
body {
font: 400 30px/1.4 Arial;
}
p {
font: 700 30px/1.4 "Pt Sans Narrow", Arial;
}
</style>
</head>
<body>
<p>Example.</p>
</body>
</html>
In this example, I don't have "Pt Sans Narrow 700". What font used?
The regular typeface of the PT Sans Narrow family used, with algorithmic (synthetic, fake) bolding applied to its glyphs. In this case, the result is clearly bolder than plain PT Sans Narrow but less bold that PT Sans Narrow Bold.
CSS Fonts Module Level 3 says, in its description of font-weight: “Although the practice is not well-loved by typographers, bold faces are often synthesized by user agents for faces that lack actual bold faces. For the purposes of style matching, these faces must be treated as if they exist within the family. Authors can explicitly avoid this behavior by using the ‘font-synthesis’ property.” (The font-synthesis property is not supported yet.)
Unless there is some very special reason to ask for “fake bolding”, despite the existence of an actual bold typeface, you should specify bold (700) weight in the element where you refer to the the Google font, as instructed by the Google documentation:
<link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow:400,700'
rel='stylesheet' type='text/css'>
You are using google font that means it obviously take this font. But if you haven't used google font then if the client has no such font then it would take another font that is Arial.
Consider this example:
font-family: font1,font2,font3;
Here if the client browser has no such font font1 then it will try to use font2 and if font2 is still not available then it will use font3 but if font3 is not still there the client's default font would be used there.
Arial is used if Pt Sans Narrow is not present.
When you open a HTML-File and the browser can't find the font, the normally it will use the default font of the browser.
What will happen is it will look at the declared font stack you have made:
"Pt Sans Narrow", Arial;
and see the next font in the list after the one it cant find "Pt Sans Narrow".
In this case it will be Arial.
This is highly depending on the rendering engine you are using.
Most engines make the font that is available "Pt Sans Narrow" just bold, which in turn would not look like the correct "Pt Sans Narrow" 700, but might come close.
And then there are those engines that skip an not available font and would choose the next in line, that might be Arial if it is available or the devices default font if the device also doesn't have Arial.
I'm using #font-face that has to be given a large font-size. for example the font-size of the title is 54px which is normally so big, but in this font it appears medium.
So the problem is, while the page loads, the alternative font appears veeeery big and breaks the whole layout.
Is there a way i can specify a font-size for alternative font?
You might be able to use Modernizr. It adds classes to the <html> element which represent features that the browser supports. In this case, the class it adds for #font-face support is fontface.
What I would do is set the title size to what looks good for the alternative font, then nest the proper font-size, like so:
.title {
font-size: 20px;
font-family: arial, sans-serif;
}
.fontface .title {
font-size: 50px;
font-family: 'alternative-font', arial, sans-serif;
}
Though, even then I guess it might not change in the right order... Generally, I'd not worry about the layout looking funny while loading, but hopefully this helps.
I would try to retrieve the name of the font being used via JavaScript or jQuery and if it's not the #font-face font then adjust the font-size accordingly.
Edit:
Here's a JavaScript Font Detection plugin to test when the fallback font is being rendered.
I made a cross-stitch pattern generator.
Some of the people who use it say that once a pattern is generated, they can't see the Unicode symbols rendered in the pattern. Here's the CSS I'm using in a sample fix to test an embedded font:
#font-face
{
font-family: FreeSerif;
src: url(Fonts/FreeSerif.ttf) format("truetype");
}
*
{
font-family: FreeSerif;
font-size: 24px;
}
Wikipedia lists the Unicode blocks that FreeSerif implements. However, some of the symbols won't render. Why might this be happening?
The pages now specify
{
font-family: Helvetica,Verdana,Tahoma,Arial,sans-serif;
}
and this is not overridden for the large table containing the stitch pattern. It is quite possible that Helvetica exists in different versions, with varying character coverage; Mac specialists might know about this. But in most computers of the world, there is no font under that name. On such computers, browsers will either use one of the other fonts, failing to display many of the characters as e.g. Verdana does not contain them, or (more usefully, and in accordance with CSS specs) scan thru the font list until they find one that contains the character being displayed and ultimately falling back to some system−dependent font.
For better predictability and robustness, you could use
td {
font-family: "Arial Unicode MS", "Lucida Sans Unicode", "DejaVu Sans",
"Quivira", "Symbola", "Code2000", ;
}
Cf. to font coverage information:
http://www.fileformat.info/info/unicode/char/25ec/fontsupport.htm
But you would really need to check that each of the fonts you list contains all of the characters you use in the table.
Other options: 1) Use font embedding (font #face) for some suitable font for which embedding is allowed—but this would probably involve considerable overhead since any font that contains all those characters is probably big. 2) Use small images instead of the special characters.
Just use CSS font priorities.
Information: http://htmlhelp.com/reference/css/font/font-family.html
Also set:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />