Other Font Properties
Other Font Properties
The font-style Property
The font-style property determines whether the text inside an element is
rendered in an italic, oblique, or roman (or normal) font style. For all practical
purposes, italic and oblique are identical.
Italics
If you’re interested in typography, it’s worth noting that if there’s an italic
font available in the font family, then it is used. Otherwise, the browser will
take the Roman font and slant it itself. Also, if oblique is specified, but only
an italic font is available, then the italic font is used, and vice versa.
The font-variant Property
In its current incarnation, the font-variant property has only one effect: it de-
termines whether text should be displayed in small-caps format. In an ideal world,
font families would contain a small-caps font, and the browser would use that
font. Unfortunately, this is very, very rarely the case. Rather, current browsers
render lowercase letters as capital letters with a smaller size than that used for
the main font.
Figure 6.5 demonstrates the font-variant property set to a value of small-caps.
The only other value this property can take is normal.
Figure 6.5. Using the font-variant property with a setting of
small-caps
Note that in Internet Explorer prior to version 6, small-caps type is rendered as
all-caps, without any difference in character size.
The font-weight Property
In the context of CSS font control, weight refers to the boldness of the characters.
The font-weight property can take two types of values: relative and absolute.
Relative values are bolder and lighter. Absolute values range from 100 (lightest)
103
Licensed to siowchen@darke.biz
Chapter 6: Working with Fonts
to 900 (boldest) in 100-unit increments, and also include the shortcut names
normal (equivalent to 400) and bold (700). This set of values is actually more
fine-grained than any current browser can support. The Adobe OpenType™ font
standard does allow for nine levels of boldness in a font family; however, I have
yet to see a practical application of all these levels.
As is the case with other relative measurements in CSS properties, these relative
settings are based on the setting of the parent of the element affected. Because
neither browsers nor fonts support the full range of nine different settings for the
font-weight property, you’ll find that two or more adjacent values usually pro-
duce identical output on the screen.
The font Shorthand Property
This shorthand property allows you to set multiple font-related properties in one
CSS declaration.
As with other CSS shorthand properties we’ve seen, values are separated from
one another by spaces, with commas used in multiple-value situations. Here’s an
example of a reasonably complex font description in CSS:
h3 {
font: bolder small-caps 22px Arial, "Lucida Console", sans-serif;
}
Notice that the font size (22px) and the font family list are included in the
definition of the style in sequence at the end of the list of properties. You must
always include at least the font-size and the font-family property values, in
that order, as the final (or only) values in the font shorthand property.
The above CSS rule produces the output shown in Figure 6.6.
Figure 6.6. A heading produced by a style rule calling for 22-pixel
bolder small-caps font
Use of the font shorthand property involves a couple of intriguing subtleties that
are worth noting. First, you can add the line-height property to the font declar-
ation by placing a forward slash (/), followed by an additional valid size or
number, after the setting for the font size. We’ll cover line-height in greater
detail in Chapter 7. Here’s an example:
104
Licensed to siowchen@darke.biz
The font Shorthand Property
p {
font: small-caps 12px/2em Arial, "Lucida Console", sans-serif;
}
The bold type in the above code fragment instructs the browser to render para-
graph text in a 12-pixel font and to set the line height to double the height of
the font. Figure 6.7 shows what a paragraph looks like without the added line-
height value. Figure 6.8 shows what it looks like when we add the two ems of
line height.
Figure 6.7. Font without the addition of line spacing
Figure 6.8. The same text with a 2em line-height property value
CSS 2 introduces the concept of a font constant that you can use when you’re
creating user interfaces and want to match user expectations based on their
browsers and operating systems. Theoretically, these constants will use the font
defined by the browser or operating system as the base from which they create
the appearance of the text to which they are applied. These constant values may
be assigned to the font shorthand property, as they represent a particular com-
bination of values for all of the font properties. The constants are:
❑
caption
❑
icon
❑
menu
❑
message-box
❑
small-caption
❑
status-bar
105
Licensed to siowchen@darke.biz
Chapter 6: Working with Fonts
Before you use this feature, you’ll want to check the browser compatibility in-
formation in Appendix C, as not all browsers support these constants.
Standard and Nonstandard Font Families
Earlier, when we discussed the font-family property, I indicated that a deeper
discussion of standard and nonstandard fonts was requisite to a complete under-
standing of the issue of font families. This section provides that background.
What do we mean by standard fonts? There’s no CSS standard or specification
that determines which fonts will be available on a user’s system. Different fonts
are available, by default, to Macintosh and Windows users, and all users are free
to install or uninstall any fonts they choose.
However, some fonts are widely available on both platforms, along with alternat-
ives that are sufficiently similar across those platforms to allow us to specify them
safely and predictably. Table 6.1 lists fonts that are available on Windows and
Macintosh systems, and are so similar that we can specify them as alternative
fonts in a font-family property, and receive fairly consistent results.
Table 6.1. Font commonality between Windows and Macintosh
platforms
MacintoshWindows Generic Font
Arial, Geneva, Helvetica, Hel-
vetica Neue, Lucida Grande,
Tahoma, Trebuchet MS,
Verdana
Arial, Lucida Sans,
Trebuchet MS, Tahoma,
Verdana
sans-serif
Headline AImpactsans-serif
Courier New, Courier Courier Newmonospace
Times New Roman, Times,
Baskerville
Times New Roman,
Georgia, Palatino Lino-
type
serif
Comic Sans MS, Chalkboard,
Marker Felt
Comic Sans MScursive
Headline AImpactsans-serif
Papyrus Papyrus fantasy
106
Licensed to siowchen@darke.biz
Specifying Font Lists
In addition to the fonts in Table 6.1, Microsoft once offered a free collection of
downloadable TrueType fonts from its web sites. Due to licensing issues, Microsoft
discontinued the collection’s availability, but thanks to a quirk in the original li-
censing, it was determined that anyone who had legally downloaded these fonts
could redistribute them. As a result, they’re now available at
http://corefonts.sourceforge.net/. Additionally, these fonts are available in a form
that works on Unix and Linux machines. They are:
❑
Andale Mono
❑
Arial and Arial Black
❑
Comic Sans MS
❑
Courier New
❑
Georgia
❑
Impact
❑
Times New Roman
❑
Trebuchet MS
❑
Verdana
❑
Webdings
A significant percentage of the systems in use today have these fonts installed,
so they can be used, if not with absolute certainty, at least with some confidence.
Specifying Font Lists
As you know, when we define a font-family style rule, usually we supply not
one font, but a list of fonts separated by commas. Fonts that contain spaces must
be enclosed in quotation marks.
What exactly does the browser do with this list of font families? As explained in
the section called “ The font-family Property”, it takes the first font family in
your list and looks for it on the user’s system. If it finds the first font, it uses it
to display the text that’s associated with the font-family property. If it fails to
find the first font, it moves to the second, then to the third, and so on.
107
Licensed to siowchen@darke.biz
Chapter 6: Working with Fonts
More specifically, the browser looks through the operating system’s collection of
fonts in search of the font families you specify. Some applications come with
their own fonts and store them in nonstandard places; those fonts will remain
invisible to the browser.
This left-to-right, sequential font family searching technique produces two basic
guidelines that affect the order in which you list font families in your styles.
First, you want to arrange the fonts in order from the most desirable to the least
desirable appearance of the text.
Second, you want the last font on the list to be the generic name for the style of
font family you’re using (usually serif, sans-serif, or monospace). This ensures
that even if none of the fonts you specify is found on the user’s system, at least
the appearance won’t be completely wrong.
As a rule, then, you won’t want to mix serif, sans-serif, monospace, cursive,
or fantasy fonts in a single CSS style rule. You’ll decide which type of font
family you want to use, then list one or more font families in order of preference.
Always end with the name of the generic font family that describes your choice
of generic style.
The following three CSS style rules are typical of the sequencing you’d likely
define:
p {
font-family: "Courier New", Courier, monospace;
}
p {
font-family: Georgia, "Times New Roman", serif;
}
p {
font-family: Helvetica, Arial, sans-serif;
}
The specific font families you specify need not be those shown in the examples,
and the sequence is not locked in concrete. The point is that, in each case, I’ve
used font family names that specify a common style, then appended the generic
family style name to the end of the list of specific fonts.
108
Licensed to siowchen@darke.biz
Using Nonstandard and Downloadable Fonts
Using Nonstandard and Downloadable Fonts
As the user’s browser will always display the text you present, no matter how you
might mangle the font-family property’s value, it follows that you can supply
font family names that are unlikely to be installed on the user’s system. The
worst-case scenario is that text may display in a way you would not have specified.
For example, if you have an affinity for a particular font that’s not normally in-
stalled on Windows machines, and for which there isn’t really a good Windows
equivalent, you can specify it, then design a sort of gradual degradation of the
appearance of the content when the font isn’t available.
Below, I’ve specified the Zapfino font that Apple includes on Macintosh; it isn’t
supplied with Windows, and is almost never installed there.
h1 {
font-family: Zapfino, "Edwardian Script ITC", fantasy;
}
Figure 6.9 shows what the display looks like in Firefox on Mac when the Zapfino
font is available. On a Windows machine, this would display as Edwardian Script
ITC if that font was available, or, if it wasn’t, the default fantasy font, which
might not be quite as aesthetic (or ugly, depending on your opinion of the Zapfino
font), will display. This will be as close as you’re likely to come to matching the
font cross-platform.
Figure 6.9. Displaying the nonstandard, but specified, Zapfino
font on Macintosh
Summary
In this chapter we saw how CSS deals with fonts, before diving in to look closely
at the workings of the font-family and font-size properties. Specifically, we
109
Licensed to siowchen@darke.biz
Chapter 6: Working with Fonts
investigated the differences between absolute and relative sizing, and considered
the impacts these differing techniques could have on a page’s usability.
We reviewed a number of other font properties before taking a closer look at the
possibilities for specifying standard and nonstandard font families in CSS.
Chapter 7 moves beyond the issue of which fonts are used to display text, and
offers some additional CSS styles and other capabilities to make your text more
engaging and lively.
110
Licensed to siowchen@darke.biz
7
Text Effects and the Cascade
This chapter builds on the last, in which we looked at the fonts text can be dis-
played in. Here, we’ll explore a range of other text characteristics, including:
❑
alignment
❑
first-line indentation
❑
horizontal and vertical spacing
❑
text decorations such as overline and strike-out
The browser treats hyperlinks differently from other text, and as such, we can
style them using a number of special techniques. Lists also present a particular
set of opportunities for text styling and presentation. We’ll be looking closely at
both hyperlinks and lists here.
The chapter concludes with a discussion of an important CSS concept: cascading.
I’ve largely ignored the “C” in CSS until now, mainly because its primary use is
to control the display of textual elements on the page.
We begin by delving into the span element, which I’ve touched on briefly in
previous chapters. As you’ll see, this element is very useful for dealing with seg-
ments of text within larger text blocks.
Licensed to siowchen@darke.biz
Chapter 7: Text Effects and the Cascade
Using the span Element
Sometimes, you want to treat some text in a paragraph, or even a headline, dif-
ferently from the text that surrounds it. For example, you might want to change
the font, or some font characteristic—such as size or color—of one or two words
in the midst of a paragraph. Obviously, you can’t create a new paragraph in the
existing paragraph without completely messing up the formatting of the page.
What’s the solution?
Enter: the span element. A span creates an inline collection of text to which styles
can be applied. A span is similar to a div, but is treated as an inline element,
instead of a block element, by default.
The span element is most useful for assigning special font properties, and some
of the more esoteric text decorations and effects we’ll discuss later in this chapter.
For example, Figure 7.1 shows a case in which the designer wanted to emphasize
a sentence by applying a highlighter effect.
Figure 7.1. Using the span element to highlight a sentence
Here’s the HTML for the page that produces that result. The style rule and span
element are shown in bold, so you can easily spot the important point in this
code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demonstrating <span> Element Usage</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<style type="text/css">
.change {
background-color: yellow;
color: maroon;
font-weight: bold;
}
112
Licensed to siowchen@darke.biz
Không có nhận xét nào:
Đăng nhận xét