Jump to content
Stef's Coding Community
PicnicTutorials

easy question: Font-family?

Recommended Posts

Hi, now I'm tiding up the css. If say the body has font-family:Arial, Helvetica, sans-serif;. And the h1 has font-family:Verdana;. In cases where there is no Verdana on the users computer will it then go in the order that I have listed for the body? Or - do you have to list all the fonts for each element listed? I presume not but I've never actually known this answer. Thanks!

Share this post


Link to post
Share on other sites

I'm guessing because I don't know the answer either.

 

If a browser looks for Verdana and can't find it, I think it will use the body style, the first one it can process.

Share this post


Link to post
Share on other sites

Thanks Wickham! Due to you were'nt quite positive either I posted the same question over here. http://www.sitepoint.com/forums/showthread.php?t=726593 This guy actually said no it does not cascade. But I don't believe him yet. Is there any way to test this aside from removing the font from your computer? I read the w3c but could not find it mentioned. And googled a bit. One other thread answers yes it did cascade but with no proof either. I'm looking for a conclusive yes or no ya know.

Edited by Eric

Share this post


Link to post
Share on other sites

Ok I found it...

 

"While an element’s font-family value will be inherited if it’s not explicitly specified, if it is specified, and none of the specified font families match an available font (this case only arises if the list doesn’t include a generic family name), the resulting property value will default to the user agent’s initial value, not the value inherited from the parent element, as you might expect."

 

http://reference.sitepoint.com/css/font-family

 

So no it does not cascade to the parent. Which is lame

Edited by Eric

Share this post


Link to post
Share on other sites

Item 5.2.2 here

http://www.w3.org/TR/REC-CSS1/#font-family

says inherited and this is the w3.org website, but of course, what does inherited really mean?

As far as I know, browsers always ignore a style that they can't process, so the inheritance should mean from a parent , ie the body.

 

Edit, just found this on the same page:-

1.3 Inheritance

 

In the first example, the color of 'H1' elements was set to blue. Suppose there is an 'H1' element with an emphasized element inside:

 

<H1>The headline <EM>is</EM> important!</H1>

 

If no color has been assigned to the 'EM' element, the emphasized "is" will inherit the color of the parent element, i.e. it will also appear in blue. Other style properties are likewise inherited, e.g. 'font-family' and 'font-size'.

 

There's your answer.

Edited by Wickham

Share this post


Link to post
Share on other sites

This sort of thing wouldn't be that hard to test, right?

 

body { font-family:arial, sans-sefif; }

h1 { font-family: "Unknown font"; }

 

If the h1 is arial, it is inherited. If it's a serif font, it gets the browser default.

 

---

 

EDIT: From my tests, an h1 will not inherit the parent element's font-family if the assigned fonts cannot be found. For example, this displays a serif header:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<style type="text/css">
		body { font-family:arial, sans-serif; }
		h1 { font-family: "Unknown font"; }
	</style>
</head>
<body>
	<h1>Test</h1>
</body>
</html>

while this displays Arial:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

	<style type="text/css">
		body { font-family:arial, sans-serif; }
		h1 { font-family: "Unknown font", arial; }
	</style>
</head>
<body>
	<h1>Test</h1>
</body>
</html>

Unless there is an error in my example somewhere?

Share this post


Link to post
Share on other sites

Unless there is an error in my example somewhere?

Yes, there is an error. Spelling sans-sefif; but that's irrelevant as Arial is chosen first for the body.

 

That's all very odd because the w3.org page says font-family is inherited.

Edit I know why Bens test show serif. If the first example has the h1 style deleted it will show arial

<style type="text/css">
		body { font-family:arial, sans-serif; }
		h1 { font-family: /*"Unknown font"; */}
	</style>

 

so it seems that inheritance only works where there isn't a style for the child. If the child's style is rubbish or an unknown font-family the inheritance doesn't happen.

Edited by Wickham

Share this post


Link to post
Share on other sites
Yes, there is an error. Spelling sans-sefif; but that's irrelevant as Arial is chosen first for the body.

Oops. fixed. As you say though, that doesn't actually affect the outcome of the demo at all.

Share this post


Link to post
Share on other sites

I thought I'd do a further test - is inheritance disabled if you mis-spell another style?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>	
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">

	<style type="text/css">
		body { font-family:arial, sans-serif; color: red; }
		h1 { font-family: arrrial;  color: bluue;}
	</style>
</head>
<body>
	<h1>Test</h1>
</body>
</html>

 

Here bluue spelling is wrong so Google Chrome DOES inherit red from body, but if font-family: arrrial is mis-spelt it does NOT inherit the body style. Very odd.

Share this post


Link to post
Share on other sites

Hi guys, thanks for the tests! yeah the way I understand it is. If the child does not have a font declared it will inherit the parent. If the child does have a font declared and the font is unavailable it will no longer look back to the parent (ie will not be inherited) and will default to initial value of sans serif. Which is stupid. Now I get to go back and put back all the fonts - yeah.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...