Say if I set the font-family for the page body to font1, font2, font3 and then I set the h1 tag's font family to font4, font5. If font 4 and 5 weren't installed, would the browser try font 1,2 and 3 before it used the browsers default font?
No, because when you specify font-family, the font stack doesn't get inherited from the parent element and then added to. You're giving it a brand new font stack of its own, separate from its parent element's.
If you want the browser to use the first three fonts for <h1>, you need to specify that:
body { font-family: font1, font2, font3; }
h1 { font-family: font4, font5, font1, font2, font3; }
Tedious, but that's how CSS font-family works :)
Short Answer: No
Good question. The feature you are talking about is known as inheritance. Essentially, will a child element inherit a parent's font-family if its own specified font-family is not installed on the user's computer.
I couldn't find any explicit documentation although this specification could be taken to mean that no inheritance will occur in this case. Therefore, to make sure, I tested out the latest stable build of Firefox with the following:
<body>
<p>Hello</p>
</body>
body {font-family: Arial;}
p {font-family: Quill;}
I don't have Quill installed but I do have Arial. However, despite this fact, the p element is rendered in the default serif font, not in Arial.
Since there is at least one major browser that functions in this way, in order to ensure consistency, you should always use this instead:
body {font-family: Arial;}
p {font-family: Quill, Arial;}
Thinking more about this, one way to fix this would be to allow the following:
p {font-family: Quill, inherit}
p {font-family: Quill, default}
The second rule is essentially what browsers do at the moment, but only implicitly. If CSS allowed us to specify the last property explicitly, we could alter this behaviour. Unfortunately, this does not work currently. Anybody know how to submit suggestions to the w3C?
nope. it will default to the browser default.
Related
What's the standard way to selectively define the font-size of one of the fonts among a gamut of font-families in CSS?
For instance, I'm trying to have my_font appear at 25px size via the following short-hand:
body{
font-family:helvetica,'my_font',arial,sans-serif;
font:helvetica,25px 'my_font',arial,sans-serif;
}
Needless to say, this doesn't work.
I believe the answer is no. The idea of a font-family is that it's a family of fonts not a single version or size.
Probably the best you can do is to just add font-size to each class or css selection that uses that font.
I think you should declare a class where you specify your font and your font-size and then use it specifically where you want. For example:
<div class="myclass">
.myclass {
font-family: 'myFont',
font-size: your-size
}
That would be the #font-face property. It's a property where you can define multiple font families and even modify a specific type of font to your preferences. It goes something like this
body {
#font-face {
font-family: 'my-font';
src: url(path-to-font);
font-size: 24px;
}
}
Read more about it here: http://www.font-face.com/#green_content
When I have set the font-family for html, body..
How can avoid restating the font-family for buttons, input, textarea etc.?
It seems to always default to some other font than my main font-family, on those elements
Setting !important does not help
And as I understand, setting the font-family on * is not advisable
You could avoid restating by simply setting them all in one go:
html,body,buttons,input,textarea,etc {
font-family: whatever font you want;
}
That's probably the simplest way if you're not using *
I just wanted to know why font: inherit; is used in Cascading Style Sheets.
Like the other answers have said, it’s to inherit a CSS property from the parent element.
What the other answers have failed to say is why you’d need this. Because, after all, CSS properties are inherited anyway, right?
Well, no. Most are, by default (but link colour isn’t inherited from the parent element, for instance). But consider this case:
p { color: blue; }
div.important { color: red; }
<div class="important">
<p>This is a text</p>
</div>
Now the text will be blue, not red. If we want the <p> to have its parent’s styling rather than its default styling, we have to override its CSS. We could of course repeat the property value (red) but that violates DRY (don’t repeat yourself). Instead, we inherit it:
div.important p { color: inherit; }
The declaration font:inherit is used in many “CSS Reset” stylesheets, which have often been copied into various libraries and frameworks. The original Reset CSS by Eric Meyer has font:inherit. No specific motivation is given. The overall rationale is said to be “to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on”. But Meyer links to a previous post of his where he explains the idea, saying, among other things: “I want all this because I don’t want to take style effects for granted. This serves two purposes. First, it makes me think just that little bit harder about the semantics of my document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
Several HTML elements have a default rendering in browsers as regards to font properties: headings, form fields, table header cells, some phrase elements, etc. Using CSS Reset, or specifically font: inherit means that on browsers supporting the inherit value, all such elements are rendered in copy text font, unless otherwise specified in a style sheet.
So this is about a particular methodology (or, as some people might say, ideology or religion) of authoring and design. It has gained popularity and often applied routinely.
The font CSS property is either a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family; or a way to set the element's font to a system font, using specific keywords. -MDN
By using font: inherit;, it tells an element to inherit those relevant values from its parent container. See the examples below:
In the 1st group: you can see there are some special style set by default from the browser, h1 is bolder and larger it also inherits the relevant values from body automatically. However, for the input element, it doesn't inherit any of those values, since it's a replaced element and serves its unique purpose.
In the 2nd group: It forces those elements to inherit those values from body by using font: inherit;.
Now, you see what it does. It's entirely up to you when to use it, for instance you might want to use <h1> tag for the site logo in the home page, and you probably want to make it look no difference than it appears on other pages. And of course, it's commonly being used in CSS reset frameworks.
body {
font-family: "Comic Sans MS", "Comic Sans", cursive;
font-style: italic;
}
.inherit {
font: inherit;
}
<h1>Heading</h1>
<input type="button" value="Button">
<hr>
<h1 class="inherit">Heading</h1>
<input class="inherit" type="button" value="Button">
Not all browsers inherit font properties on all elements. Netscape 4.x was notoriously bad about about inheritance. Consider the following style:
body { background: black; color: white }
In Netscape 4.x, the color was not applied to table elements, so you would end up with the default black text inside the table on a black background.
Font properties have the same kind of deal for some elements, particularly form elements (and table elements for older browsers). It's not uncommon to see a definition like this:
table, form { font: inherit }
The inherit is used to get the properties from the parent element. In other words, inherit the properties of parent element.
The default property is inherit, it means, say you have div and a p.
<div>
<p>Hello World!</p>
</div>
Now you give a style:
div {font-famlily: Tahoma;}
p {font-family: inherit;}
That font-family is inherited to the p from its parent element div.
Using {font:inherit;} in CSS makes sense because various user agents (a.k.a. browsers) have user agent stylesheet (read: default stylesheet) with something like
body
{
font: -magic-font-from-user-preferences;
}
textarea, input
{
font: monospace;
}
The {font:inherit;} is used to workaround the special case where font or font-family is not inherited by default due to user agent stylesheet but the author of the content wishes the font family to be inherited.
The actual user agent behavior with the value inherit differs due to various bugs, unfortunately. Resulting behavior may be closer to author intent than the default value, though.
inherit in CSS simply means it inherits the values from parent element, so for example:
<div style="font-family: Arial;">
<p style="font-family: inherit; /* This will inherit the font-family of the parent p*/">
This text will be Arial..And inherit is default behavior of the browser
</p>
</div>
Here <p> inherits the font-family: Arial; from it's parent div
You need to use inherit for example in the case of anchor elements,
the color property is commonly set to blue in the user agent style
sheet. If you wanted to reinforce the importance of the inherited
value, you could use the value inherit in an author or user style
sheet, overwriting the user agent style sheet declaration.
More Reference
Is there a way to specify a different font-size for a different font-family. The font I want to use(for purposes of product branding) is a somewhat rare font (FlashDLig) not supported by all PC's and browsers. (my one windows 7 PC with IE 9 does not display it...) Now for a fallback font I use Arial, the problem is that arial is much larger than FlashDLig, so I want to specify a different font-size for it in the same class. Is it possible?
I know you can probably use font-size-adjust but it is only supported in Firefox.
Any suggestions? Javascript magic maybe?
Thanks
I would recommend defaulting to Arial, and then create a second class that uses a #font-face declared for your font. Then I think you'd have to use Javascript to test whether the font was able to load (maybe check derived style of some element you put off-screen), and if so, change the class to the new one. The reason I'd do it that way instead of starting with your custom font has to do with the idea of progressive enhancement.
Here's one way to change the class in Javascript:
if (fontLoaded()) {
document.body.className += " fontLoaded";
}
And then in your CSS:
#font-face {
... /* declare font face */
}
body {
font-family: "Arial";
font-size: 0.8em;
}
body.fontLoaded {
font-family: "FlashDLig";
font-size: 1em;
}
Have a look at the following code examples:
http://www.lalit.org/lab/javascript-css-font-detect/
and
http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/
And adjust your stylesheet from the result of the detection.
I've used these some time ago with good results.
Good luck! :)
Basically, I need to adjust the font type everywhere it isn't specified. How can I do that? table, div, span, p, input, you name it. Is there a way I can do them all with 1 CSS rule that I can add?
Yes there is, use it on the body element and it will cascade down to all children unless you specify otherwise.
body {
font-family: Arial, Verdana, sans-serif;
}
#tahoma {
font-family: Tahoma, sans-serif;
}
You can then override it
<body>
<div id="default">
I will inherit the body font-family, in this case Arial because no other rule has been set!
</div>
<div id="tahoma">
<p>Me, <span>Me</span> and <strong>Me</strong> are using Tahoma because our parent #tahoma says so.</p>
</div>
</body>
This is why it's called Cascading Style Sheets. Styles set at any level will "cascade" down. So if you set this styling on the body element, every other element in the body will take on the same styles.
body {
font: ...;
}
What's missing from the existing answers is the fact that the font family of some elements, like input, is unaffected by simply setting the font family for body, as suggested here.
The reason is that an element inside the body inherits the font family setting only if there is no rule that specifies this setting for this element. For elements like input (and also pre, code, etc.), there usually are rules that specify the font family: the basic styling rules defined by the browser.
To override the browser default, one needs to explicitly set the font family for these elements:
body, input, button, textarea {
font-family: ...;
}
Note that !important should not be necessary to achieve this. Using !important is a sign that the stylesheets were not designed carefully enough.
Use !important css property.
http://webdesign.about.com/od/css/f/blcssfaqimportn.htm
Like:
*{
YOUR_FONT_STYLE
}