Chapter 11. Text And Fonts - Hello! HTML5 & CSS3

chapter eleven Chapter 11. Text and fonts

This chapter covers

  • Adding custom fonts to your pages with @font-face
  • Detailed control of font rendering with font-feature-settings
  • Improving readability with CSS columns
  • Controlling text wrapping and overflow

Despite being designed from the start as a way to share text documents, the web has traditionally had poor typography. In this chapter, you’ll learn how all that is changing as CSS3 brings in many new features for control of fonts and text.

Basic web fonts

Typography, the art of setting and arranging type, is a big part of design; a particular typeface is often as much a part of a company’s image as its logo or corporate color scheme. But in CSS2, there’s basically no way to specify a font that will be used by all users across all browsers and operating systems.

Typography on the web has always been limited because of its client-server design—the font has to be on the client machine, where the rendering is done, and not on the server. This is what leads to standard font-family declarations like this:

The idea is that Arial (a Microsoft font), Helvetica (the standard Apple font), and sans-serif will all look relatively similar—but is that true? Instead of specifying a set of fallbacks, let’s compare what each font by itself looks like in some different browsers. Here’s the standard CSS rule split into three:

Making your life easier with font services

Advanced web typography

Text columns

Browser support quick check: CSS columns

Standard

Prefixed

- 1.0
- 1.5
10.0 -
11.10 -
- 3.0

Wrapping and overflow

Browser support

Summary

Từ khóa » Html5 Sans Serif