[This page resided at http://danielgreene.com/fontprop.html from 1998–2010.]
A Demonstration of CSS Font Properties
| Property |
Value |
Display in Your Browser |
| Property |
Value |
Display in Your Browser |
| font-family |
serif |
The quick brown fox jumps over the lazy dog. |
| sans-serif |
The quick brown fox jumps over the lazy dog. |
| cursive |
The quick brown fox jumps over the lazy dog. |
| fantasy |
The quick brown fox jumps over the lazy dog. |
| monospace |
The quick brown fox jumps over the lazy dog. |
| font-style |
normal |
The quick brown fox jumps over the lazy dog. |
| italic |
The quick brown fox jumps over the lazy dog. |
| oblique |
The quick brown fox jumps over the lazy dog. |
| font-variant |
normal |
The quick brown fox jumps over the lazy dog. |
| small-caps |
The quick brown fox jumps over the lazy dog. |
| font-weight |
normal |
The quick brown fox jumps over the lazy dog. |
| bold |
The quick brown fox jumps over the lazy dog. |
| bolder |
The quick brown fox jumps over the lazy dog. |
| lighter |
The quick brown fox jumps over the lazy dog. |
| 100 |
The quick brown fox jumps over the lazy dog. |
| 200 |
The quick brown fox jumps over the lazy dog. |
| 300 |
The quick brown fox jumps over the lazy dog. |
| 400 |
The quick brown fox jumps over the lazy dog. |
| 500 |
The quick brown fox jumps over the lazy dog. |
| 600 |
The quick brown fox jumps over the lazy dog. |
| 700 |
The quick brown fox jumps over the lazy dog. |
| 800 |
The quick brown fox jumps over the lazy dog. |
| 900 |
The quick brown fox jumps over the lazy dog. |
font-size
<absolute-size> |
xx-small |
The quick brown fox jumps over the lazy dog. |
| x-small |
The quick brown fox jumps over the lazy dog. |
| small |
The quick brown fox jumps over the lazy dog. |
| medium |
The quick brown fox jumps over the lazy dog. |
| large |
The quick brown fox jumps… |
| x-large |
The quick brown fox… |
| xx-large |
The quick brown… |
font-size
<relative-size> |
larger |
The quick brown fox jumps over the lazy dog. |
| smaller |
The quick brown fox jumps over the lazy dog. |
font-size
<length>
(arbitrary
examples—
non-scalable
values) |
12pt |
The quick brown fox jumps over the lazy dog. |
| 1pc |
The quick brown fox jumps over the lazy dog. |
| 72pt |
The… |
| 1in |
The… |
| 10mm |
The quick… |
| 1cm |
The quick… |
| 12px |
The quick brown fox jumps over the lazy dog. |
font-size
<length>
(arbitrary
examples—
scalable
values) |
1em |
The quick brown fox jumps over the lazy dog. |
| 1.2em |
The quick brown fox jumps over the lazy dog. |
| 1ex |
The quick brown fox jumps over the lazy dog. |
| 1.2ex |
The quick brown fox jumps over the lazy dog. |
font-size
<percentage>
(arbitrary
examples) |
100% |
The quick brown fox jumps over the lazy dog. |
| 120% |
The quick brown fox jumps over the lazy dog. |
| 150% |
The quick brown fox jumps over the lazy dog. |
| 225% |
The quick brown… |
| 338% |
The quick… |
Using the Shorthand font Property
{ font: 150% serif; }
The quick brown fox jumps over the lazy dog.
{ font: italic bold 100%/200% "Lucida Sans", Verdana, sans-serif; }
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. (Lines repeated to demonstrate the extra line-spacing, or “leading.”)
{ font: normal small-caps large Braggadocio, "Broadway BT", fantasy; }
The quick brown fox jumps over the lazy dog.
{ font: lighter x-large "Lucida Calligraphy", "Brush Script MT", "English 157 BT", cursive; }
The quick brown fox jumps over the lazy dog.
Daniel Greene first published this document in February 1998.
Advertisement
Like this:
Be the first to like this post.
About Daniel Greene
Daniel Greene, BA, CI & CT, NIC Master, has been an ASL interpreter / transliterator since 1990. He teaches workshops on vague language (VL), genre recognition, and other topics. His other passions are singing and photography. He is married with dogs.
Pingback: Top Fox, completing the feel of Firefox « Helpful Linux Tidbits
Pingback: Better Fox, Cat, and Weasel – part 2 « Helpful Linux Tidbits