Publishers of technology books, eBooks, and videos for creative people

Home > Articles

Font Controls

  • Print
  • + Share This
This chapter is from the book

Setting Multiple Font Values

Although you can set font properties independently, it is often useful, not to mention more concise, to put all font elements in a single definition. To do this, you use the font property.

This example (Code 3.6 and Figure 3.13 ) shows a level 1 header tag being defined, along with a class called copy that will be applied to paragraphs of text. In addition, the level 3 header tag is defined with the shorthand font style (see the sidebar "Using the Visitor's Styles" on the next page).

Example 3.6. The <h1> tag and copy class have had the various font styles set at the same time, while the <h3> tag uses a shorthand value to mimic the caption style.

<html>
<head>
     <style type="text/css"><!--
        h1 {
           font: bold italic small-caps
           U2192.GIF 2.5em/3em 'minion web', Georgia,
           U2192.GIF 'Times New Roman', Times, serif;
        }
        h3 {
           font: caption;
        }
        .copy {
           font: 10px/20px Arial, Helvetica,
           U2192.GIF Geneva, sans-serif;
        }
     --></style>
</head>
<body>
     <hr>
     <h1>Alice's Adventures In<br>
     Wonderland</h1>
     <h3>Lewis Carroll</h3>
     <hr>
     <h3>CHAPTER I<br>
     Down the Rabbit-Hole</h3>
     <p class="copy">Alice was beginning to
     U2192.GIF get very tired of sitting by her sister
     U2192.GIF on the bank...</p>
</body>
</html>
fig03_13_mulitplefont.jpg

Figure 3.13 You can set all the font properties (and the line height) in a single definition and even instruct the page to use styles defined by the visitor's computer.

To define several font attributes simultaneously in a rule:

  1. font: Type the property name font, followed by a colon (:). Then type the values in the following steps (Table 3.9):

    Table 3.9. font Values

    Value

    Compatibility

    <font-family>

    IE4, N4, S1, O3.5, CSS1

    <font-style>

    IE4, N4, S1, O3.5, CSS1

    <font-variant>

    IE4, N4, S1, O3.5, CSS1

    <font-weight>

    IE4, N4, S1, O3.5, CSS1

    <font-size>

    IE4, N4, S1, O3.5, CSS1

    <font-height>

    IE4, N4, S1, O3.5, CSS1

    <visitor-style>

    IE5, N6, S1, O3.5, CSS2

  2. bold Type a font-weight value, followed by a space (see "Setting Bold, Bolder, Boldest" earlier in this chapter).
  3. italic Type a font-style value, followed by a space (see "Making Text Italic" earlier in this chapter).
  4. small-caps Type a font-variant value, followed by a space (see the previous section, "Creating Small Caps").
  5. 2.5em Type a font-size value (see "Setting the Font Size" earlier in this chapter).
  6. /3em Type a forward slash (/), a line-height value, and a space (see "Adjusting Text Spacing" in Chapter 4).
  7. 'minion web', Georgia,
    U2192.GIF 'Times New Roman', Times, serif;
    
    Type a font-family value and closing semicolon (refer to "Setting the Font" earlier in this chapter).

  • + Share This
  • 🔖 Save To Your Account