HTML and CSS Reference
In-Depth Information
New CSS3 Features
Along with animations, transforms, and transitions, there are several new
noteworthy features to the CSS3 spec. In this section, you will learn how to use
@font-face
to introduce new typefaces to your mobile web application by
importing the font files.
You will also learn how to use several new border styling elements, such as
border-radius
(which will allow you to create rounded borders on elements
without requiring extra markup or JavaScript),
box-shadow
, and
border-image
.
You will also learn how to create CSS3 gradients that will scale, depending on
the size of the document, without requiring repeating background images and
saving on bandwidth.
This section also covers several of the new CSS3 selectors that make it easier to
style DOM elements based on state and hierarchy.
@font-face
@font-face
is a new, standardized feature of CSS3 that allows you to use fonts
outside of the web-safe font list (fonts such as Arial and Times New Roman,
which are typically found on most devices). This gives you the freedom to
become much more creative with your typefaces. Prior to
@font-face
,
nonstandardized methods of using fonts that were not web safe included cufon
(a technique taking advantage of Canvas and SVG), sIFR (although now no
longer being maintained, sIFR made use of Flash), and standard CSS image
replacement (a method that makes use of prerendered images of text as a
background image for the text that should be displayed on the screen).
It's important to remember that although you have complete freedom over the
typefaces that you use, you must make sure that the typeface really relates to
your content and audience. It's also important to remember that some typefaces
are suitable for headings, but not suitable for body text as it becomes
unreadable at smaller font sizes (see Figure 5-4). For instance, Comic Sans is a
bad font choice for body text.
'Comic Sans is unique: used the world over, it's a typefa ce that
doesn't really want to be type. It looks homely and handwritten,
something perfect for things we deem to be fun and liberating. Great
for the awnings of toyshops, lss good on news websites or on
gravestones and the sides of ambulances.'
