Font Management in CSS3

While HTML5 provides basic support for font management (you can specify bold, italics, underline, and other effects), CSS3 takes the support for font to an entire new level.

Let us take a look at a few CSS3 artifacts related to fonts.

font-family

This property allows web developers to specify a prioritized list of font family names. This property can be applied to all elements and inheritance is permitted.

A simple example is shown below

body {

    font-family: sans-serif, Helvetica, Verdana;

}

 

The above example implies that sans-serif is the preferred font to be used if available, if not, Helvetica (if available) will be used, and finally Verdena will be used if none of the prior will be available.

We can even specify a generic-family as a value for this property (permitted values are “serif”, “sans-serif”, “cursive”, “fantasy” and “monospace”).

 

font-weight

This property specifies the weight of glyphs in the font, their intensity (blackness) .

The permitted values are “normal” (equal to 400), “bold” (equal to 700), “bolder”, lighter” and numeric values which range from 100 through 900 in increments of 100.

 

font-stretch

This property is used to select a face from a font family – normal, condensed or expanded.

The permitted values are (ordered form narrowest to widest): “ultra-condensed”, “extra-condensed”, “condensed”, “semi-condensed”, “normal”, “semi-expanded”, “expanded”, “extra-expanded” and “ultra-expanded”.

 

font-style

This property allows to select italic or oblique faces. The permitted values are “normal”, “italic”, or “oblique”.

 

font-size

This property is used to select desired height of glyphs from a font. The permitted values are as under:

–          “absolute-size” – The value is determined by the user-agent: Possible values are “xx-small”, “x-small”, “small, “medium”,  “large”, “x-large”, “xx-large”.

–          “relative-size” – This keyword is interpreted relative to the table of font sizes and the computed “font-size” of the parent element. Possible values are “larger” and “smaller”.

–          “length” –  this is to specify an absolute font size.

–          “percentage” – this specifies an absolute font size related to the parent element’s font size.

 

 

 

Font resources

CSS3 also supports linking to fonts that can be automatically fetched and activated when needed. This supports web developers to define a font what they want user’s browsers to display, which the user-agent will download and render the content in that font. This is supported by the @font-face rule, which can be defined as under

@font-face {

  font-family: MyFontFamily;

  src: url(http://mysite.com/myfont.woff);

}

 

To use this font, we declare the element’s font family as under:

h2 { font-family: MyFontFamily, serif; }

 

Summary

In this article, we learned about the support for font management in CSS3 module. I hope you have found this information useful.

 

About the author

Vipul Patel is a Program Manager currently working at Amazon Corporation. He has formerly worked at Microsoft in the Lync team and in the .NET team (in the Base Class libraries and the Debugging and Profiling team). He can be reached at vipul.patel@hotmail.com

 

References

http://www.w3.org/TR/css3-fonts/