elements, and moves them in relation to the surrounding text. The HTML and elements automatically shift text vertically in relation to the rest of the line. As a result, vertical-align is not as useful for text as you might expect. The property accepts the following values: baseline Align the text to the same baseline as text in the parent element. This is the default value. middle Align the vertical midpoint 0.25em above the baseline of the parent. sub Align text to the proper position for a subscript. This does not alter the size of the font. super Align text to the proper position for a superscript. This does not alter the size of the font. text-top Align the top of the imaginary text box with the top of the text in the parent element.
66 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
text-bottom Align the bottom of the imaginary text box with the bottom of the text in the parent element. top Align the top of the imaginary text box in line with the top of the parent’s text box. bottom Align the bottom of the imaginary text box in line with the bottom of the parent’s text box. inherit Vertical alignment is not inherited by default, so use this to apply the same value as the parent element. You can also use a length or percentage. Both align the bottom of the imaginary text box by the given amount above the bottom of the parent’s text box, or below it if a negative value is used. A percentage value is calculated as a proportion of the current line height.
■■Note The vertical-align property also controls the vertical alignment of inline blocks and the content in table cells. Inline blocks are covered in Chapter 6, and styling tables is the subject of Chapter 14.
Drawing Lines Under, Above, and Through Text The text-decoration property controls underlining, strike-throughs, and lines above text. One of its most common uses is to remove the underline from unvisited and visted links. In CSS3, some useful options have been added, such as setting the color and style of the line. But let’s start with the way it works in CSS2.1. The textdecoration property accepts the following values: none Remove underlines or cancel any inherited text-decoration rules. underline Underline the text. overline Add a line above the text. line-through Add a line through the center of the text. blink Flash the text on and off . Browsers are not required to support this, and this value has been removed from CSS3. inherit This property is not inherited, so use this to apply the same value as the parent element. You can use a space-separated list to sandwich text with lines above and below by using both underline and overline in the same style declaration like this: text-decoration: underline overline; Setting the value to line-through has the effect of striking out text. It’s the recommended replacement for the deprecated and HTML tags. In fact, you can go the whole hog and use all three types of lines in the same declaration. Figure 4-9 shows the effect of each type of line.
67 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
Figure 4-9. The text-decoration property draws a line under, over, or through text or any combination
In CSS2.1, the color of the line is inherited from the text.
Changes to text-decoration in CSS3 The CSS3 Text module proposes improvements to the text-decoration property that allow you to set a different color and change the style of the line. CSS3 introduces four new properties: text-decoration-line This takes the same values as text-decoration in CSS2.1, except blink, which has been dropped. text-decoration-color This sets the color of the line(s). text-decoration-style This sets the style of the line(s). Accepted values are solid, double, dotted, dashed, and wavy. The default is solid. text-decoration-skip This specifies which elements, if any, the line(s) should skip over. Accepted values are none, objects, spaces, ink, and edges. The default is objects, which skips over images and inline blocks. The meaning of spaces is selfexplanatory. Specifying ink prevents the line(s) from being drawn over a character. The edges keyword is mainly for use in Chinese. It creates a separate line for each character in a group rather than one solid line. The text-decoration property itself becomes the shorthand for these four new properties. This ensures backward compatibility with CSS2.1 and older browsers. However, it means you need to be careful when using the new properties in combination with text-decoration because the shorthand version overrides any previously set values. To maintain cross-browser compatibility, you need to specify text-decoration first for older browsers, followed by the new properties to enhance the display in browsers that understand them. If you put text-decoration last, the other properties won’t be applied. Currently, no browser supports text-decoration-skip. However, Firefox has supported the three other CSS3 properties with the -moz- browser-specific prefix since version 6. It’s also a good idea to follow the browserspecific versions with the official properties so they’ll be used as soon as browsers support them, for example like this:
68 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
.under { text-decoration: underline; -moz-text-decoration-color: red; -moz-text-decoration-style: wavy; text-decoration-color: red; text-decoration-style: wavy; } Figure 4-10 shows how Firefox renders text-decoration_css3.html.
Figure 4-10. CSS3 offers an increased range of options for text-decoration
When browsers fully support the CSS3 implementation of text-property, you’ll be able to consolidate the values for any combination of text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-skip into a single shorthand declaration. For example, the preceding under class can be rewritten like this: .under { text-decoration: underline red wavy; } However, even when browsers start to support this CSS3 shorthand, you won’t be able to use it if you want your style to be rendered in older browsers. For the foreseeable future, you need to use the CSS2.1 version of text-decoration followed by the individual CSS3 properties for cross-browser compatibility.
Indenting the First Line of Text The text-indent property takes a length or a percentage and indents the first line of text in each block by the amount specified. When the value is a percentage, the indentation is a percentage of the parent element’s width. Figure 4-11 shows what happens when you set text-indent for paragraphs to 40px (see text-indent.html).
69 www.it-ebooks.info
t
Figure 4-11. The text-indent property automatically indents the first line in each text block
Y Tip you can’t use text-indent to indent an entire block of text. you’ll learn how to do that in Chapter 6 by adjusting the text’s padding or margins. If you specify a negative value for text-indent, it creates a hanging indent with the first line protruding to the left, as shown in Figure 4-12.
Figure 4-12. A negative value for text-indent creates a hanging indent
Compare Figures 4-11 and 4-12. The text-indent property affects only the first line, shifting it right or left relative to the remaining text. The hanging indent is made possible by the fact that the paragraphs have a left margin of 40 pixels (margins are covered in Chapter 6). Without the margin, the text in the hanging indent would disappear off the left of the browser window.
70 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
Switching Between Uppercase and Lowercase The text-transform property converts text to use initial caps, all lowercase, or all uppercase. It’s supported by all browsers, and accepts the following values: capitalize Convert to uppercase the first letter after every space. lowercase Convert all characters to lowercase. uppercase Convert all characters to uppercase. none No conversion. The text-transform property is inherited, so it affects all child elements. Set the value to none in a child element to turn off an inherited text transformation rule.
Controlling Whitespace and Line Wrapping Browsers automatically close up sequences of spaces, ignore new lines in HTML, and wrap text at the right edge. The white-space property gives you control over the handling of whitespace and new lines. It accepts the following values: normal This is the default value and is used to cancel any inherited value. pre Preserve all spaces and new lines in the HTML. nowrap Prevent the browser from automatically wrapping text. pre-line Close up sequences of whitespace as in normal text, but honor new lines. Not supported in IE 6–7. pre-wrap Preserve sequences of whitespace and new lines, but automatically wrap text when the border is reached. Not supported in IE 6–7. Using pre has a similar effect to tags in HTML, but with the advantage of preserving the current font. It’s useful for displaying poetry without the need to insert
tags at the end of each line. You can also use spaces to indent lines. There are examples of each value of white-space in white-space.html. Figure 4-13 shows the results. The section with the gray background illustrates the effect of text wrapping.
71 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
Figure 4-13. The white-space property overrides the browser’s default handling of spaces and new lines
Dealing with Text That’s Too Long If text is too long to fit into the space available, browsers let it overflow, destroying the design and sometimes making the text illegible. CSS lets you deal with the overflow by breaking the text or hiding it.
72 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
Breaking Overflow Text When there are no spaces in text, such as with a long URL, the browser is unable to break it, resulting in an ugly overflow. All browsers in current use support the word-wrap property to handle this situation. It accepts the following values: normal This is the default. Lines may break only at normal word break points. break-word Lines can break at arbitrary points if no break points can be found.
■■Note Although word-wrap has been supported by browsers for many years (it first appeared in IE 5.5 in 2000), it was never officially part of the CSS specification. When the W3C decided to include it in the CSS3 Text module, it insisted on calling the property overflow-wrap because it’s a more accurate description of what the property does. However, browser manufacturers objected to a name change purely for the sake of linguistic accuracy. After much debate, the W3C caved in and accepted word-wrap as an official synonym for overflow-wrap. Although overflowwrap remains the W3C’s preferred name, it’s currently not supported by any browser. Use word-wrap instead.
Hiding Overflow Text To hide overflow text, the overflow property needs to be set to hidden (the overflow property is covered in more detail in Chapter 6). This simply clips the text. A more elegant way to handle the overflow is to add the text-overflow property, and set its value to ellipsis. For example, the third paragraph in overflow_text.html uses the following class: .ellipsis { overflow: hidden; text-overflow: ellipsis; } Figure 4-14 shows examples of the same text being broken over several lines using word-wrap, clipped by setting overflow to hidden, and the excess text being replaced by an ellipsis using a combination of the overflow and text-overflow properties.
■■Note The text-overflow property is supported by IE 6+, Firefox 7+, Opera 11+, and all versions of Safari and Chrome.
73 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
Figure 4-14. CSS lets you break or hide text that’s too long to fit
Adding Shadows to Text The text-shadow property does exactly what you expect—it adds a shadow to text without the need to embed the text in an image. In fact, it can add multiple shadows to text. It was originally part of the CSS2 specification, but was dropped from CSS2.1 because no browsers supported it. Ironically, once it had been dropped, most browsers then implemented it. The only exception was Internet Explorer, which supports text-shadow only since IE 10.
■■Note Because of its CSS2 origins, there’s no need to use a browser-specific prefix with text-shadow. The text-shadow property expects the following values: A length specifying the horizontal offset of the shadow. A positive value moves the shadow to the right of the text, a negative one moves it to the left. A length specifying the vertical offset of the shadow. A positive value moves the shadow below the text, a negative one moves it above. An optional length specifying the shadow’s blur radius. Negative values are not allowed. The color of the shadow. If no color is specified, the shadow is the same color as the text.
74 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
The order of the three length values is fixed, but the color value can come before or after them. Although the color is optional, omitting it usually produces unsatisfactory results. To create a realistic shadow, it’s best to use a color with alpha transparency. All browsers that support text-shadow also support the rgba() and hsla() color formats. The styles in text-shadow.html contain the following classes: .no-blur { text-shadow: 0.1em 0.1em rgba(0,0,0,0.4); } .blur { text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.4); } .color-blur { text-shadow: 0.1em 0.1em 0.2em rgba(0,102,102,0.4); } Figure 4-15 shows the result in a browser.
Figure 4-15. Adding a blur radius to a text shadow produces a more subtle effect
All classes use the same horizontal and vertical offsets, which position the shadow 0.1em (one-tenth the height of the font) to the right of the text and below it. The first two classes use the same color (black with 40 percent alpha transparency), but only the second one has a blur radius, which softens the effect. The final class uses a similar color to the text.
Adding Multiple Shadows to Text You can add more than one shadow to text by creating a comma-separated list of shadow definitions. Figure 4-16 shows examples of text effects using multiple shadows in text-shadow_multi.html.
75 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
Figure 4-16. Multiple shadows on text produce a variety of effects without the need for images Multiple shadows are rendered with the first one on top and each subsequent one painted behind its predecessor. So, if you want shadows to overlap, smaller ones must be listed first.
Creating Raised and Inset Text To create the raised and inset letterpress effect similar to the one on the left of Figure 4-16, you need to choose four related colors ranging from light to dark. The lightest and darkest colors are used for the shadows. Use the darker of the remaining colors for the text, and the lighter one for the background. I used the following colors to create the effect in Figure 4-16: #FFE79B Light yellow (shadow) #FFE79B Mustard (background) #CCAA3F Dark mustard (text) #7F744D Brown (shadow) For a raised effect, use the lightest color to create a 1px shadow to the top left of the text, and the darkest color to the bottom right. For an inset effect, use the colors the other way round. The styles in text-shadow_multi.html look like this: .raised { text-shadow: -1px -1px #FFE79B, 1px 1px #7F744D; } .inset { text-shadow: -1px -1px #7F744D, 1px 1px #FFE79B; }
■■Caution The contrast between the text and background color might not be sufficient for users with color blindness or partial vision. This technique is best reserved for decorative effect on nonessential text.
76 www.it-ebooks.info
CHAPTER 4 ■ Styling Text
Outlining Text At the time of this writing, there is no agreed way of adding a stroke to text. The CSS3 Text module proposed a text-outline property, but it was dropped. WebKit browsers, such as Safari and Chrome, support a nonstandard -webkit-text-stroke property, but there are currently no signs of it being adopted by the W3C or other browsers. However, you can fake adding an outline to text by adding a 1px shadow to all four sides like this: .outline { text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; } This is a rather clumsy solution, but at least it works in all browsers that support text-shadow. Unfortunately, using just two shadow definitions (-1px -1px #000, 1px 1px #000) doesn’t produce quite as good a result. You can compare the different effects in outline.html. The difference is subtle, but noticeable.
Using Multiple Shadows for a More Intense Effect The last two examples in text-shadow_multi.html demonstrate a surprising feature of the text-shadow property. If shadow definition uses a blur radius, repeating the same definition multiple times intensifies the effect. The last two examples use the following styles: .glow { text-shadow: 0 0 0.4em #6F9; } .intense-glow { text-shadow: 0 0 0.4em #6F9, 0 0 0.4em #6F9, 0 0 0.4em #6F9; } The glow class creates a green text shadow with no offsets and a 0.4em blur radius. The intense-glow class simply repeats the same definition three times, resulting in a more intense effect (see Figure 4-16).
Summary CSS gives you an impressive toolbox to style and format text, and more features are being added by browsers as CSS3 evolves. Browsers depend on the fonts available to them, so you need to create a font stack to offer a choice of fonts with similar characteristics, finishing with a generic font family. In addition to choosing fonts, fontrelated properties allow you to control the size and whether the font should be displayed as bold, italic, or small caps. As well as setting fonts, you have many formatting options, such as changing the horizontal space between individual characters and words using letter-spacing and word-spacing. You can also change the vertical space between lines of text with line-height; draw lines under, over, and through text with text-decoration; indent the first lines of text with text-indent; control whitespace and overflow text with white-space and text-overflow; and add multiple effects with text-shadow. In the next chapter, you’ll learn how to increase the range of font options using embedded fonts and related properties.
77 www.it-ebooks.info
Chapter 5
Embedding Web Fonts For many years, web designers—frustrated by the narrow range of web-safe fonts—have been demanding the ability to embed different fonts in their web pages. It’s hard to believe, but Internet Explorer (IE) 4 was the first browser to support embedded fonts way back in 1997. Two main factors prevented other browsers from following suit: IE used a proprietary technology for web fonts; and font foundries were concerned about fonts being downloaded and reused without paying license fees. The situation began to change rapidly after 2008–2009, when all major browsers finally offered support for CSS @font-face rules that specify the location of font files. This sparked the creation of many new fonts designed specifically for embedding in web pages. At the same time, font foundries began to relax their attitude toward embedded fonts. Not every font is available for embedding in web pages, but you now have a much wider range to choose from. In this chapter, you’ll learn about the following: •
Which font formats are necessary for cross-browser compatibility
•
Checking whether a font’s license allows it to be used in a website
•
How to specify the location of font files with @font-face
•
Specifying bold and italic fonts
•
Restricting the range of characters downloaded by the browser
•
How to adjust the relative size of fallback fonts
Using web fonts rather than images for text has several advantages, the most important being that it makes the text content immediately accessible to assistive technology for the blind and search engines. If the text needs to be changed, you just change it in the HTML rather than creating a new image.
Adding Web Fonts to Your Sites To add nonstandard fonts to your web pages: you can either use a font hosting service to deliver the fonts from a content distribution network (CDN), or you can store the font files on your own web server. Most fonts are protected by copyright, so you can’t upload font files to your website without first checking the license and seeing if there are any restrictions on its use. Even if you have paid for a font, you cannot assume that you have the right to use it in a website. It might be restricted to use on your local computer. Having said that, there are hundreds of fonts that you can use—and many of them are available free of charge.
Using a Font Hosting Service Font hosting services, such as Typekit (https://typekit.com/), Fontdeck (http://fontdeck.com/), WebINK (www.extensis.com/en/WebINK), and Google web fonts (www.google.com/webfonts), offer a wide range of web
79 www.it-ebooks.info
CHAPTER 5 ■ Embedding Web Fonts
fonts. Google offers more than 500 fonts free of charge, but most other font hosting services charge an annual subscription or scaled fees depending on the number of visitors to your sites. The hosting service should provide detailed instructions of how to use the fonts. Normally, all you need to do is to include a link to the CDN in your web pages and add the font name at the beginning of the relevant font stack(s) in your style sheet. Other advantages include: •
A wide choice of fonts from a single source.
•
No need to worry about licensing issues; the hosting service handles them for you.
•
Reduced bandwidth consumed by your web server.
A potential drawback is that the CDN might be down or network latency might result in a delay in the fonts being loaded.
Storing Fonts on Your Own Server The alternative is to store the font files on your own web server. This increases the amount of bandwidth consumed when someone accesses your web pages, but it gives you greater control. There’s no danger of the fonts not being rendered if the CDN is down or if you forget to renew your font hosting subscription. If you choose to store the fonts on your own server, you need to handle all the technical and licensing details yourself. It’s not particularly difficult, but there are some oddities to which you need to be alert. The main problems are the need to supply multiple formats for cross-browser compatibility, and the way that embedded fonts handle bold and italic. The rest of this chapter is devoted to these issues.
Choosing the Right Font Formats Fonts come in a variety of formats. Table 5-1 lists the main formats and the browsers that support them. Table 5-1. Font Formats and Browser Support
Format
Extension
Support
Embedded Open Type (EOT)
.eot
IE 4+
TrueType (TTF) & OpenType (OTF)
.ttf, .otf
IE 9 +, Firefox 3.5+, Chrome 4+, Opera 10+, iOS4.2+
Web Open Font Format (WOFF)
.woff
IE 9+, Firefox 3.6+, Chrome 5+, Safari 5.1+, Opera 11+
Scalable Vector Graphics (SVG)
.svg
Chrome 17+, Safari 5+, Opera 11.6+, iOS 3.2+, Android 3+
It’s expected that WOFF will become the dominant format. It has the backing of many font foundries, and was adopted as a candidate recommendation by the W3C in August 2011. However, for cross-browser support, you’ll also need EOT and TTF, and possibly SVG. Internet Explorer supports TTF and OTF only if the font’s embedding permissions are set to installable.
80 www.it-ebooks.info
CHAPTER 5 ■ EmbEdding WEb FonTs
Tip Font squirrel (www.fontsquirrel.com) offers a wide range of web fonts that are free for commercial use. most are supplied as an @font-face kit, which contains all formats needed for cross-browser compatibility. The companion Fontspring site (www.fontspring.com) performs a similar service for commercial fonts.
Checking the License Although most modern browsers support OpenType and TrueType fonts, many font foundries expressly forbid embedding them in web pages. So, it’s important to check the license. Because each font designer, foundry, and distributor has different rules regarding the use of fonts, it’s impossible to give blanket advice in a book. Check with the supplier. If in doubt, don’t use the font in your website. Using a font in violation of the license could turn into an expensive mistake. The Font Squirrel and Fontspring websites have a prominent link to the license that applies to each font, so you can check its conditions before deciding whether to download it. Many fonts on the Font Squirrel site use the SIL Open Font License (http://scripts.sil.org/OFL), which allows the font to be used and redistributed freely as long as it is not sold separately. All web fonts used in this chapter come under this license. Other fonts are governed by individual licenses that impose simple requirements, such as adding an acknowledgment and link to the font creator’s website in your style sheet.
Embedding Fonts with @font-face Before you can use a web font in your styles, you need to tell the browser where to find the necessary font files with an @font-face rule.
Basic Syntax An @font-face rule is made up of what the CSS specification calls descriptors, which define the location and style characteristics of the font. The basic syntax looks like this: @font-face { font-family: font_name; src: location [format]; } The font-family descriptor defines the name of the web font. You can choose any name you want. If it contains spaces, the name must be wrapped in quotes. If you choose the name of a font that already exists on a user’s computer, the font specified in the @font-face rule takes precedence. The src descriptor tells the browser where to find the font files. Specify multiple values for different font formats as a comma-separated list. You can try to load a local version of the font if it exists on the user’s system by inserting the font’s full name or Postscript name between the parentheses after local(). The required name differs according to the font and operating system, so the CSS specification recommends using both. However, the normal practice is to load the font files from your web server. You specify the location by inserting the path between the parentheses after url(), as described in “Specifying Background Images and Other Files” in Chapter 3. The files must be located on the same domain as the website. After the location, you can add an optional format() declaration, using one of the format strings listed in Table 5-2.
81 www.it-ebooks.info
CHAPTER 5 ■ Embedding Web Fonts
Table 5-2. Font Format Strings
Font Format
Format String
EOT
"embedded-opentype"
TrueType
"truetype" *
OpenType
"opentype" *
WOFF
"woff"
SVG Font
"svg"
* The truetype and opentype font strings are regarded as synonymous.
“Bulletproof” @font-face Syntax Although the basic @font-face syntax is fairly straightforward, browser bugs complicate the situation. Thanks to the efforts of Paul Irish and other talented web developers, a “bulletproof” workaround has been devised. It involves using two src descriptors like this: @font-face { font-family: 'My Font'; src: url('myfont.eot'); src: url('myfont.eot?#iefix') format('embedded-opentype'), url('myfont.woff') format('woff'), url('myfont.ttf') format('truetype'), url('myfont.svg') format('svg'); } The first src descriptor takes just the path to the EOT font file. The second src descriptor consists of a comma-separated list of font file locations, each with a format() declaration. The list begins with the path to the EOT file again, but with ?#iefix appended to it. The order of the remaining formats isn’t important, but it’s recommended to list WOFF next. The need for two src descriptors for EOT is because of a bug in IE 8 and earlier, which fail to load the font if more than one format is listed. Adding ?#iefix tricks older versions of IE into treating the rest of the descriptor as a query string, so the font is loaded correctly. However, the bug was fixed in IE 9, which is why you need a separate src descriptor for EOT. It’s messy, but it works. If you’re not worried about older browsers seeing the web fonts, you can use just the WOFF format like this: @font-face { font-family: 'My Font'; src: url('myfont.woff') format('woff'); }
Specifying Bold and Italic A potentially confusing aspect of embedding web fonts is that the font-family property in an @font-face rule identifies only a single font, not the whole family with its bold, italic, and other versions, such as expanded or condensed. If you want the other versions of the same family, you need to create separate @font-face rules for each one. You can either give each font face a different name, or you can reuse the same name and specify its characteristics using extra descriptors.
82 www.it-ebooks.info
CHAPTER 5 ■ Embedding Web Fonts
Using Different Names The Aurulent Sans font (www.fontsquirrel.com/fonts/Aurulent-Sans) designed by Stephen G. Hartke is available in four styles: regular, italic, bold, and bold italic. To demonstrate what happens when you use different names for the fonts, different.css in the ch05/styles folder contains the following style rules: @font-face { font-family: 'AurulentSans Regular'; src: url('fonts/AurulentSans-Regular-webfont.eot'); src: url('fonts/AurulentSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/AurulentSans-Regular-webfont.woff') format('woff'), url('fonts/AurulentSans-Regular-webfont.ttf') format('truetype'), url('fonts/AurulentSans-Regular-webfont.svg') format('svg'); } @font-face { font-family: 'AurulentSans Bold'; src: url('fonts/AurulentSans-Bold-webfont.eot'); src: url('fonts/AurulentSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/AurulentSans-Bold-webfont.woff') format('woff'), url('fonts/AurulentSans-Bold-webfont.ttf') format('truetype'), url('fonts/AurulentSans-Bold-webfont.svg') format('svg'); } body { font-family: 'AurulentSans Regular', sans-serif; } .bold { font-family: 'AurulentSans Bold', sans-serif; } The @font-face rules assign different names to the regular and bold versions of the font. The body selector applies the regular font to all text, and the bold class uses the bold font.
■■Note I’ve used a class for bold text to show what happens if the browser can’t find the correct font weight. This style sheet is attached to different.html, which contains the following HTML markup in the of the page: The Lobster Quadrille
The Lobster Quadrille
"Will you walk a little faster?" said a whiting to a snail.
"Will you walk a little faster?" said a whiting to a snail.
"Will you walk a little faster?" said a whiting to a snail.
The page contains the same level 1 heading twice and the same paragraph three times. Figure 5-1 shows how Chrome 21 on Windows renders the page.
83 www.it-ebooks.info
CHAPTER 5 ■ Embedding Web Fonts
Figure 5-1. Chrome synthesizes bold text Normally, browsers render
