The font-family property allows you to specify the typeface used to display a piece of text. You can specify more than one typeface, and the first one that the user has installed on their system will be the one used. You can make use of any of the fonts installed on the user’s operating system, though in practice you’ll generally stick to the set of web safe fonts that we discuss later. There are also some so-called generic font families that browsers map to the most appropriate system font, as in the following code.
{font-family: <family-name>,<generic-family>;}
Example:
body {font-family: arial, helvetica, sans-serif;}
h1 {font-family: “Times New Roman”, Georgia, Serif;}
The example is pretty straightforward, and hopefully by now you are sufficiently familiar with CSS to guess what it does. A set of font families, arial, helvetica, sans-serif, out of which the first installed font is applied to text within the body element, and a different set of font families “Times New Roman”, Georgia, Serif is applied to any h1 elements. There are two things to note about the format. First, the names of each font are case insensitive (that is, they can be uppercase, lowercase, sentence case, or whatever mixture of cases you find most readable). Second, as you saw before, strings which contain spaces (for example, “Times New Roman” must be enclosed with quotation marks).
The font-family property can accept one or more fonts for its value, which is what is meant by the repetition of the syntax in the notation and the presence of the asterisk. The asterisk indicates that the syntax may be repeated one or more times, and a comma is used to separate each font name provided. You can specify two types of fonts. The first is documented as <family-name> in the preceding code. The <family-name> notation refers to fonts installed on the user’s computer, which means that the available fonts depend on the user’s operating system and the fonts available to that operating system. The <generic-family> notation refers to a small subset of predefined fonts that can be expected to always be available.
0 comments:
Post a Comment