HTML and CSS Reference
In-Depth Information
suggest you explore SVG for your advertising campaigns, especially when graphics are mandatory, target screens are
varied and file size limitations come into play during development and testing on publisher pages.
Web Fonts
Heading into creative development with HTML5 with CSS3, let's shift gears a bit and learn more about rendering
fonts to the screen using CSS3 web fonts. For a long time fonts on the Web were horrible; there were only a select few
“Web safe” fonts available: Arial, Courier, Times, Verdana, etc. . . While this was good in that it provided a consistent
experience for the end user, it severely limited designers' creativity. Designers wanted to duplicate their level of print
creativity on the Web, but they couldn't unless they saved typography designs as images or leveraged Flash when it
became the advertising standard. Saving as images was a pain—updates weren't easy to make since they were often
made into images, and with more image files coming down to the end user, longer load times resulted. Moreover, you
could certainly throwaway the possibility of dynamic text content with designed typography. When Flash became the
standard, brands and marketers fell in love with its rich font rendering and ability to offer dynamic text with a brand's
exact font.
Strictly speaking, web fonts aren't really new; they've been in CSS level 2, but limited browser adoption and
fragmented vendor support sabotaged their ability to shine with designers. In the latest CSS level 3 spec (CSS3), the
inclusion of web fonts brings the ability to render any of the designer's fonts via CSS by including an at-rule set for font
face. Listing 4-13 shows a rock-solid way to include web fonts—specifically, Oxygen, a font in Google's free web font
library—in your CSS styling.
Listing 4-13.
Using CSS3 Web Fonts (HTML)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='
http://fonts.googleapis.com/css?family=Oxygen
'
rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
html, body {
font-family: 'Oxygen', sans-serif;
}
</style>
</head>
<body>
</body>
</html>
■
Note
google's list of open source and free web fonts can be found at
google.com/webfonts
.
Notice that I've linked to the external CSS file hosted on Google's domain. Once loaded, the new font family
Oxygen can be added to the style sheet or as an inline style within our HTML markup. Simple enough? Listing 4-14
looks at what's going on in the Google-provided style sheet we're linking to.
