CSS3 Foundations

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 thousands 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 www.wiley.com/go/treehouse/css3foundations.

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