HTML5 Guidelines for Web Developers

5.6 Text 131

Table 5.2 The components of the CSS “font” property

Property Values

font-style *normal, italic, oblique

font-variant *normal, small-caps

font-weight *normal, bold, bolder, lighter

100, 200, 300, 400, 500, 600, 700, 800, 900

font-size xx-small, x-small, small, *medium,

large, x-large, xx-large, larger, smaller

em, ex, px, in, cm, mm, pt, pc, %

line-height *normal, <number>, em, ex, px, in, cm, mm, pt, pc, %

font-family Font family or generic font family, such as serif, sans-

serif, cursive, fantasy, monospace

When assembling the font attribute, only the properties font-size and font-
family are required. All others are optional, and if omitted, default to the values
marked with an asterisk as shown in Table 5.2. Because Canvas text does not
recognize line breaks, the attribute line-height has no effect and is always
ignored. The cleaned-up pattern for assembling the components is therefore:

context.font = [
font-style font-variant font-weight font-size font-family
]

Regarding the font-family, the same rules apply as for defining fonts in
stylesheets: You can specify any combination of font families and/or generic
font families. The browser then picks the first known font from that priority list.

You can achieve complete independence from the browser or the relevant plat-
form and its fonts by using webfonts. Once they are integrated into a stylesheet
via @font-face, they are available as font-family in Canvas, too, via the font
name assigned:

@font-face {
font-family: Scriptina;
src: url('fonts/scriptina.ttf');
}

Figure 5.17 shows brief examples of valid CSS font attributes and their render-
ing in Canvas. The source of the webfont Scriptina in the preceding example is
http://www.fontex.org—a well-organized collection of free fonts that are avail-
able for download.