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).

Code 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
           → 2.5em/3em 'minion web', Georgia,
           → 'Times New Roman', Times, serif;
        }
        h3 {
           font: caption;
        }
        .copy {
           font: 10px/20px Arial, Helvetica,
           → 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
     → get very tired of sitting by her sister
     → on the bank...</p>
</body>
</html>
Figure 3.13

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,

    → '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