HTML and CSS Reference
In-Depth Information
chapter
eleven
Styling Fonts and Text
IN THE PRECEDING
chapter you gave the Cool Shoes & Socks page some unique fonts via Google Web Fonts.
With a knowledge of
@font-face
and third-party font services, you have access to tens of, if not hundreds of thou-
sands of, fonts to give web pages a unique style of their own. Why stop there, though? CSS offers many ways to style
fonts and text to make a page even more useful and unique.
Project files update (ch11-00): If you haven't followed the previous instructions and are comfortable working from
here onward or would like to reference the project files up to this point, you can download them from
Styling Fonts
Changing the appearance of text doesn't end at changing the font face. If all text on a page were the same style, no
matter how fancy the font, the page would look dull and wouldn't direct the users eye particularly well. By changing
attributes relating to the font, such as size, variant, weight, and so on, you can help the user determine which text is
more important than other text, allowing them to scan the page quicker.
font-style
Initial value:
normal
| Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 4+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
By using the
font-style
property, you can change the style of a font between
normal
,
italic
, and
oblique
.
In the preceding chapter, I mentioned that the two fonts chosen from Google Web Fonts are only available in a normal
style. Fonts often have various styles, such as oblique and italic. Both of these styles are slanted; oblique is a distorted
version of the normal style, and italic is a style of its own, generally cursive in nature. The default
font-style
is
normal
, so at present all fonts on the Cool Shoes & Socks page have a normal style.
Because the fonts you used from Google Web Fonts come only in a normal style, does that mean you can't use italic
and oblique styles? No. Assuming you declare a
font-style
of
italic
, a browser looks to see whether an italic
version of a font is available. If not, it looks for an oblique version, and if that doesn't exist either, the browser renders
the normal style of font with a sloping transformation applied—making an oblique style.
1.
In styles.css, in the
p + .offer
rule set, add the following:
font-style: italic;
2.
Save styles.css.
