CSS Fonts

1
CSS Fonts
2
CSS Fonts

• The Font properties allow you to change the font
  family, boldness, size, and the style of a text.

3
Notes - Useful Tips

• Fonts are identified by their name in CSS1. Note
  that if a browser does not support the font that
  is specified, it will use a default font.

4
The Font Property

• The font property is, with exception of some
  system fonts, a shorthand property for setting
  all of the properties for a font in one
  declaration. 
• Note This property also has a sixth value
  "line-height", which sets the space between
  lines.
• Inherited Yes

5
Example

• pfont italic bolder
• pfont italic small-caps bold 12px arial
• pfont oblique small-caps 900 12px/14px
  arial
• pfont menu

6
(No Transcript)
7
Browser Notes

• Note in Netscape 4.0
• The "font-variant" value in this declaration does
  not work

8
Font-Family Property

• The font-family property is a prioritized list
  of font family names and/or generic family names
  for an element. The browser will use the first
  value it recognizes.

9

• There are two types of font-family values
• family-name The name of a font-family, like
  "times", "courier", "arial", etc.
• generic-family The name of a generic-family,
  like "serif", "sans-serif", "cursive", "fantasy",
  "monospace".

10

• Note Separate each value with a comma, and
  always offer a generic-family name as the last
  alternative.
• Note If a family-name contains white-space, it
  should be quoted. Single quotes must be used when
  using the "style" attribute in  HTML.
• Inherited Yes

11
Example

• bodyfont-family courier, serif
  pfont-family arial, "lucida console",
  sans-serif
• ltp style"font-family arial, 'lucida console',
  sans-serif"gt

12
Possible Values
13
Browser Notes

• Notes in Netscape 4.0
• The "cursive" generic-family renders as "serif"
• The "fantasy" generic-family renders as
  "sans-serif"

14
Font-Size Property

• The font-size property sets the size of a font.
• Inherited Yes

15
Example

• bodyfont-size x-large pfont-size 10px

16
Possible Values
17
Browser Notes

• Note in IE 4.0 
• Default value of this property is "small", not
  "medium" as it should be according to the W3C
  specification
• Notes in Netscape 4.0
• Default value of this property is "small", not
  "medium" as it should be according to the W3C
  specification
• Do not use values under 100. It can change
  color of the text or make the text difficult to
  read

18
Font-Size-Adjust

• The ratio between the height of the font's
  lowercase letter "x" and the height of the
  "font-size" is called a font's aspect value. If
  the aspect value is high, the font will be
  legible when it is set to a smaller size. For
  example Verdana has an aspect value of 0.58
  (means that when font size is 100 px, its
  x-height is 58 px). Times New Roman has an aspect
  value of 0.46. This means that Verdana is more
  legible at smaller sizes than Times New Roman.
• The font-size-adjust property specifies an
  aspect value for an element that will preserve
  the x-height of the first-choice font.
• Inherited Yes

19
Example

• h2font-size-adjust 0.58

20
Possible Values
21
Font-Style Property

• The font-style property sets the style of a
  font.
• Inherited Yes

22
Example

• bodyfont-style italic

23
Possible Values
24
Font-Weight Property

• The font-weight property sets how thick or thin
  characters in text should be displayed.
• Inherited Yes

25
Example

• pfont-weight bold

26
Possible Values