font-weight

The font-weight property is an alternative way of bolding text. In HTML we have two elements that bold text:

<b>This is bold text</b>
<strong>This is strong text</strong>

However, these two elements only bold our text one way and one way only. If we want a variety of bolded text then we would use the font-weight property. Here as possible values of the font-weight property:

  1. 100
  2. 200
  3. 300
  4. 400
  5. 500
  6. 600
  7. 700 (bold)
  8. 800
  9. 900
  10. normal
  11. bold
  12. bolder
  13. lighter

Off the bad 600 pops out as being different than the rest. This is because browsers will stretch out it for some reason.. If you want bold then use 700.

font-variant

The font-variant property is somewhat anti-climatic because the only value that is worth knowing is small-caps. Consider the following:

body {font-variant:normal;}
p.fancy {font-variant:small-caps;}

By default all text within the body element will be "normal" unless you tell it otherwise. In p.fancy the text will be in Small Caps. And how fancy those small caps look!

Font, all-inclusive

Like some CSS properties, we also have the ability to declare everything and anything within the general font property. Here's an example:

#font {font:italic 18px bolder Verdana, Geneva, sans-serif;}

So in order of execution, the font will be italicized first, then 18px, then bolded, and then changed to Verdana font! Also, remember what that pound sign is in front of a CSS selector? Of course! It's the "ID" of an HTML element so...

<p id="font">Some italic, Verdana, 18px, bolder text</p>

Extra Goodies

Here are some extra goodies that you don't commonly see! These properties are seldom used and I don't believe they are standard yet..

font-size-adjust

To be perfectly honest, the only thing that I know about the so-called font-size-adjust property is that it changed the aspect ration of the font that you want. Usually there is a numeric value such as .5 or 1 instead of "inherit" or "none". You could, for example, use something like the following:

.adjust {font-size-adjust:1;}

And how very exciting that is... This will also have an example in the zip archive. You can read much more about the font-size-adjust property by reading this w3c article.

font-stretch

The font-stretch property is pretty self explanatory actually. Possible values for this property are:

  1. ultra-expanded
  2. extra-expanded
  3. semi-expanded
  4. wider
  5. normal
  6. narrower
  7. semi-condensed
  8. extra-condensed
  9. ultra-condensed

Once again, this example will have to wait for the zip archive... But I'm not even sure it does anything or if any browser supports it.. Check out this w3c article for more information.

Click on the icon to download a review of this entire tutorial and see some examples!
css-basics4.zip
css-basics4.zip
Size: 2.01 KB

Be Sociable, Share!