Beginning CSS: Cascading Style Sheets for Web Design, 2nd ...

Chapter 6: FontsThe example is pretty straightforward. Times New Roman is applied to the first paragraph with the idname times-new-roman, and Arial is applied to the second paragraph, with id name arial. There isone fundamental difference between the two: Times New Roman appears enclosed in double quotes.The name of the font itself contains white space, and so enclosing the name of the font in quotes preventsthe browser from getting confused. The second example, which specifies an Arial font, does notappear enclosed in quotes because no white space appears in the name of the font.The notation for the font-family property can accept one or more fonts for its value, which is what ismeant by the repetition of the syntax in the notation and the presence of the asterisk. The asterisk indicatesthat the syntax may be repeated one or more times, and a comma is used to separate each fontname provided. You can specify two types of fonts. The first is documented as in thepreceding table. The notation refers to fonts installed on the user’s computer, whichmeans that the available fonts depend on the user’s operating system and the fonts available to thatoperating system. The notation refers to a small subset of predefined fonts that canbe expected to always be available; this is discussed shortly.Font FamiliesThe available font families that can be specified vary depending on the operating system. Using adefault installation, Windows does not provide the same fonts as Mac OS X, for instance. Furthermore,the available fonts also vary depending on the programs installed on the user’s computer. For instance,Microsoft Office installs a number of extra fonts in addition to those that ship with Mac OS X or Windows.In fact, with the exception of a few fonts, Mac OS X with Microsoft Office installed provides pretty muchthe same fonts as installed on Windows. Without Microsoft Office installed, however, many Windowsfonts are not available on the Mac platform.It is for this reason, the possibility of font inconsistencies, that the font-family property is dynamic.It can accept more than one font as its value. The browser will use the first font provided that is installedand available on the end user’s computer. The browser will fall back to the next font in the list inthe event that previous fonts are not available. So subsequent fonts in the list are called fallback fonts.This capability is provided because it is difficult to foresee which fonts will be available on the user’scomputer.It is best to test your web page on several different platforms using different browsers on different operatingsystems to ensure that your fonts are working as you intend them to. Providing fallback fontsensures consistency of fonts. Take for example the rule in Figure 6-2a.Figure 6-2a169