Font

font-family: family-name | generic-family, family-name | generic-family, ... ;
S: All

• family-name : 'Gill','Helvetica','Verdana',...
• generic-family : serif,sans-serif,cursive,fantasy,monospace
• Tips and FAQs
  • The style sheet designer should provide a list of family-names with at least one commonly available family and eventually at least one generic-family.
  • Family-names with withespaces and/or special chars should be placed inside quotes.
  • Generic-family are keywords and must not be quoted
• Examples
  • font-family: Gill, Helvetica, sans-serif;
  • font-family: 'Comic Sans MS', fantasy;

font-style: normal | italic | oblique;
P: NS4 S: IE4+ NS6+ O3.5+ Gecko

• Examples
  • font-style: italic;

font-variant: normal | small-caps;
B: IE4 MacIE4 S: IE5+ MacIE5+ NS6+ O3.5+ Gecko

• Examples
  • font-variant: small-caps;

font-weight: normal | bold | bolder | lighter | 100 | ... | 900;
P: NS4 S: IE4+ NS6+ O3.5+ Gecko

• Tips and FAQs
  • Numerical values are alternative to previous keywords, 400 is equivalent to normal and 700 is equivalent to bold.
  • Bolder and lighter are relative to the inherited value.
• Examples
  • font-weight: bold;

font-size: absolute-size | relative-size | length | percentage;
S: All

• absolute-size : xx-small | x-small | small | medium | large | x-large | xx-large
• relative-size : larger | smaller
• length
  • Relative to medium : 10px, 0.5em, 1ex
  • Absolute physical: 0.5in, 1cm, 8mm, 12pt, 1pc
• percentage : 40%
• Tips and FAQs
  • For screen output, a Relative Length value (e.g. 12px) should be used, while for printed medium an Absolute Length value (e.g. 12pt) is better.
• Examples
  • font-size: 1.5em;
  • font-size: 150%;
  • font-size: 16px;

font: [font-style font-variant font-weight] font-size [/line-height] font-family;

• font-style,font-variant,font-weight,font-size,font-family : see above.
• line-height : same numeric format of font-size.
• Tips and FAQs
  • If you set and individual font property (font-weight: bold;) and then you set other properties with this complete format (font: italic 12px Verdana;), remember that the previous style is overridden by the last. You have two options: set individual property after complete format style, or use complete format only.
• Examples
  • font: bold italic 12px Verdana;
  • font: 12px/14px sans-serif;
  • font: 80% sans-serif;
  • font: bold large Palatino, serif;