CSS Styling Fonts

CSS font properties define the font family, boldness, size, and the style of a text. In CSS, there are two types of font family names:
  1. generic family - a group of font families with a similar look (like "Serif" or "Monospace")
  2. font family - a specific font family (like "Times New Roman" or "Arial")

Font Family

The font family of a text is set with the font-family property.

The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. More than one font family is specified in a comma-separated list:

Example:
  • p{font-family:"Times New Roman", Times, serif;}

Note: If the name of a font family is more than one word, it must be in quotation marks, like font-family: "Times New Roman".


Tip: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

Font Style

The font-style property is mostly used to specify italic text. This property has three values:
  1. normal - The text is shown normally
  2. italic - The text is shown in italics
  3. oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

Example:
  1. p.normal {font-style:normal;}
  2. p.italic {font-style:italic;}
  3. p.oblique {font-style:oblique;}
Font Size

The font-size property sets the size of the text. The font-size value can be an absolute, or relative size.

Absolute size:

  • Sets the text to a specified size
  • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
  • Absolute size is useful when the physical size of the output is known

Relative size:

  • Sets the size relative to surrounding elements
  • Allows a user to change the text size in browsers

0 comments :

Post a Comment

> Related Posts with Thumbnails
 

Copyright © 2012. GS dot net - All Rights Reserved - Design by BTDesigner - Proudly powered by Blogger