|
|
|
 Fonts and text
Finally some real control over fonts, yipee!!
There are 5 font properties, and 1 shorthand.
font-family
font-style
font-variant
font-weight
font-size
font (shorthand)
font-family
The font-family property specifies what font will be used, ie. Courier,
Helvetica, Arial, etc... or if not available what general family to be
used: serif, sans-serif, monospace.
The fonts are listed in preferred order. One nice thing about listing
numerous fonts is that if the user system does not support one font,
another font in the list will be used instead.
Examples:
BODY { font-family: Times, TimesRoman, serif }
P { font-family: Helvetica, Verdana, Arial, sans-serif }
H1 { font-family: Monaco, Courier, monospace }
Other generic font families that can be used are cursive and fantasy.
The generic font families above are serif, sans-serif and monospace. If
your font has more than one word use quotes.
.comix { font-family: "Comic Sans MS", sans-serif }
font-style
Valid values for font-style are normal, italic, and oblique. Very
straight forward, oblique is similar to italic.
font-variant
Valid values for font-variant are normal and small-caps. Small caps
displays the lowercase letters as scaled down uppercase letters.
font-weight
This property specifies what you want the font to weigh, ex. 50 lbs of
pure Courier. Well not exactly, the weight of the font is the boldness, or
lightness of the font. The valid values that you can assign font-weight
are:
normal, bold, bolder, lighter
and 100, 200, 300, 400, 500, 600, 700, 800, 900
Note: normal=400, bold=700
font-size
You guessed it, this specifies the size of the font. There are 5
different ways you can specify the font size. In no particular order, here
they are:
absolute size:
point size: ie. 7pt, 22pt, 14pt, 36pt, 72pt, ...
pixel size: ie. 100px, 45px, 90px, 10px, ...
relative size:
key words: xx-small, x-small, small,
medium, large, x-large, xx-large
percentage: 24%, 58%, 150%, 10%, 100%, ...
ems: .24em, .58em, 1.5em, .1em, 1.0em, ...
For font-size, ems are equivalent to percentages. Also you only put in
the values for the size you want, do not specify the descriptive words
absolute size, point size, etc...
Pixel sizing is not recommended by Netscape. The relative sizes are
relative to the parent element. For example, if a base font size is set in
the BODY, then the the relative sizing is relative to that base font size.
font
Font is a shorthand notation to keep our sheets a little cleaner and
neater. The order of the shorthand is 'font-style' 'font-variant'
'font-weight' 'font-size' 'font-family' Also keeping with normal
typographical syntax, you can specify the leading, or line-height along
with the font-size by using font-size/line-height.
Examples:
H1 { font: bolder 72pt Impact, "New SchoolBook", sans-serif }
H2 { font: 700 36pt/48pt Monaco, Courier, monospace }
H5 { font: lighter 12pt Times, TimesRoman, serif }
Text
There are 5 text properties that you can specify.
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
letter-spacing and word-spacing
Exactly how it sounds, this specify the spacing between letters and
words. The valid values are length values, such as em, px, pt, %,...
Examples:
P { word-spacing: 0.75em; letter-spacing: 10px; }
text-decoration
The text-decoration values you can assign to it are: normal, underline,
overline, line-through, and blink (blech!!) Each one is fairly self
explanatory. Here is the popular definition that rids all links of the
underline beneath them:
A {text-decoration:none}
vertical-align
Valid values are: baseline, sub, super, top, text-top, middle, bottom,
text-bottom.
I am not exactly sure the minute differences between all of these, play
around with different alignments and see what does what.
text-transform
This property can transform text to either uppercase, lowercase, or
capitalized. The valid values are: none, capitalize, uppercase, lowercase.
text-align
This probably should have been called horizontal-align, since they have
a vertical align, but my guess is that that is to hard to spell and type
in numerous times. Valid values for text-align are: left, right, center,
and justify.
text-indent
Indented a paragraph, what a concept. Valid values are length and
percentages. This property will indent the first line in a paragraph, the
specified length or percentage.
Examples:
.indent1 { text-indent: 1.0em; }
.indent2 { text-indent: 30px; }
line-height
This allows you specify the height of a line, which will allow you to
specify the distance between two lines. I found this a little tricky to
use, it doesn't work well as an inline property, I found as a paragraph
property works pretty good. Valid values are: length and percentages,
negative values are not allowed.
Example:
P.listi { line-height: 80%; }
|
