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

Home > Articles

Font Controls

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

Making Text Italic

The two kinds of styled text—italic and oblique Sare often confused. An italic font is a special version of a particular font, redesigned with more pronounced serifs and usually a slight slant to the right. An oblique font is simply a font that is slanted to the right by the computer ( Figure 3.7 ).

fig03_07_fontstyles.gif

Figure 3.7 Italic or oblique? To really tell the difference, take a careful look at the letter "i" in both words.

With the font-style element, you can define a font as italic, oblique, or normal. When a font is set to italic but does not have an explicit italic version, the font defaults to oblique.

In this example (Code 3.3 and Figure 3.8 ), the class booktitle and any paragraphs within a <blockquote> are italicized. The title uses a serif font, so it shows the true italics, while the blockquote is using a sans-serif font, which is actually oblique, even when defined as italics.

Example 3.3. The booktitle class and <blockquote> tags will be italicized.

<html>
<head>
     <style type="text/css"><!--
        .booktitle {
           font-family: 'times new roman',
           U2192.GIF times, serif;
           font-style: italic;
        }
        blockquote {
           font-family: arial, helvetica, serif;
           font-style: italic;

       }
     --></style>
</head>
<body>
     <h1 class="booktitle">Alice in Wonderland
     U2192.GIF </h1>
     <p><i>How doth the little--</i>&quot;' and
     U2192.GIF she crossed her hands on her lap...</p>
     <blockquote>
        <p>'How doth the little crocodile</p>
        <p>Improve his shining tail,</p>
     </blockquote>
</body>
</html>
fig03_08_italicexample.jpg

Figure 3.8 Book titles and quotes are generally italicized to set them off.

To set font-style in an HTML tag:

  1. font-style: Type the property name font-style, followed by a colon (:).
  2. italic; Type a value for the font-style. Your options are (Table 3.6)
    • italic, which displays the type in an italic version of the font
    • oblique, which slants the text to the right
    • normal, which overrides any other styles set

    Table 3.6. font-style Values

    Value

    Compatibility

    normal

    IE4, N4, S1, O3.5, CSS1

    italic

    IE4, N4, S1, O3.5, CSS1

    oblique

    IE4, N6, S1, O3.5, CSS1

  • + Share This
  • 🔖 Save To Your Account