Web-Safe Fonts |
LineOfLight.com | cross-browser.com |
In each of the following generic font-name examples I specify the font-family in the SPAN's style attribute, like this:
<span style="font-family:serif">This is an example of serif</span>Now look at this example code:
<span style="font-family:verdana">This is an example</span>If the user does not have verdana installed, the browser will select it's own default font - which may be nothing like verdana.
Now look at this example code:
<span style="font-family:verdana,arial">This is an example</span>If the user does not have verdana installed, the browser will try to find arial. If the user does not have arial installed, the browser will select it's own default font - which may be nothing like verdana nor arial.
Now look at this example code:
<span style="font-family:verdana,arial,sans-serif">This is an example</span>If the user does not have verdana installed, the browser will try to find arial. If the user does not have arial installed, the browser will look at sans-serif - but, sans-serif is not the name of a font (at least, not within CSS)- it is a generic font name. And so the browser will look for a font that is of the generic type sans-serif. The link in my previous post shows the W3C recommendation for what fonts are within each generic font type.
The last example is what I like to use. I really want Verdana but if the user doesn't have it installed I'll settle for Arial - and if they don't have Arial installed I'll let the browser pick the closest thing to an "arial-type" font, that is, sans-serif.
In these examples I've used in-line CSS, which is fine for these examples but I normally never use it like that on a page. I would do something like the following:
<html>
<head>
<style type="text/css"><!--
.arialStyle {
font-family: verdana,arial,sans-serif;
font-size: 12px;
color: #000000;
background: #ffffff;
margin:0;
padding:0;
}
.romanStyle {
font-family: georgia,"times new roman",serif;
font-size: 12px;
color: #000000;
background: #ffffff;
margin:0;
padding:0;
}
--></style>
</head>
<body>
<div class="arialStyle">Hello There!</div>
<div class="romanStyle">Welcome To My Wackiness!</div>
</body>
</html>
| Mike Foster | LineOfLight.com | cross-browser.com |