Cover by Ian Lunn

Safari, the world’s most comprehensive technology and business learning platform.

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required

O'Reilly logo

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.

green-frog_nobkgrnd.psd

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

Find the exact information you need to solve a problem on the fly, or go deeper to master the technologies and skills you need to succeed

Start Free Trial

No credit card required