Tài liệu Sams Teach Yourself CSS in 24 Hours- P4 pptx

Other properties or browser defaults will narrow down the specific font.Font families generally include a number of variations on the base font, for example, anitalic version of the font

and typeface of the font, respectively In addition, there are a number of other propertiesthat can be used to further select fonts from within those families These properties arefont-weight, font-variant, font-style, font-stretch, and font-size-adjust.

To understand how these properties work, it’s important to understand how CSS viewsfonts A font in CSS is one specific instance of several properties: a specific typeface,size, weight, and other variables So the font12pt Arial bold italicis different fromthe font 10pt Arial They are part of the same font family, of course It’s helpful toremember that when you declare a font family, you’re actually selecting a group of fonts

to be used Other properties (or browser defaults) will narrow down the specific font.Font families generally include a number of variations on the base font, for example, anitalic version of the font In some cases, you will specify a font combination that simplyisn’t available as a distinct variant The browser will then have to create a variant on thefly by slanting the text to produce italic effects, for example, or by using the closestavailable equivalent in the font family

The effects produced by various font settings are listed in Table 8.1 for reference; this isbecause it’s not always clear which property controls which effect

TABLE 8.1 Properties Affecting Font Display

Property Effect

font-family Selects the typeface family

font-size Sets the size of the font

font-weight Makes text bold or lighter

font-variant Creates “small caps” effect

font-style Sets italic font

font-stretch Stretches the font horizontally

text-decoration (Hour 9) Underlines text

color (Hour 9) Changes the color of text

line-height (Hour 12) The height of the line (but not the text height)

font Sets font-family , font-size , font-weight , font-variant ,

font-style , and line-height

Thefont-weightproperty controls how heavy a font appears—in other words, the ness of the lines used to draw that font, relative to the size of the font The weight of a

thick-font is measured in numbers that range from 100to900, in steps of 100 The higher thenumber, the bolder the font; normal text has a weight of 400and bold text (as created bythe HTML <b>tag) has a weight of 700.

Not all font families have specific fonts at all values; in such a situation, the browser willusually use the closest match For example, if there’s no weight 800variant for a font,the browser may substitute weight 700

Many browsers support only two to four font-weightvalues Figure 8.1 shows howOpera 6 (Windows) displays each font-weightvalue of Verdana, whereas Figure 8.2 isfrom Internet Explorer 5.1 (Macintosh) Notice that they differ on whether weights 500and600should be weighted like 400,700, or somewhere in between Keep this in mind;

it will be important later on

8

F IGURE 8.1

Successive weightvalues of Verdana font, shown in Opera 6.

font-In addition to numeric values, the font-weightproperty can take named values, asshown on Table 8.2 The font-weightvalue is inherited from the containing box if any

is set The default value is normal(400) for most HTML tags; some, such as <b>,

<strong>,<h1>to<h6>, and<th>, will default to bold(700)

TABLE 8.2 Values for the font-weightProperty

inherit Uses the value of the containing box’s font-weight property

If a font’s weight is already at 900, the value bolderwon’t make it any heavier; likewise,

if the font-weightis100, lighterhas no additional effect

F IGURE 8.2

Successive weightvalues of Verdana font, shown in Internet Explorer 5.1 (Macintosh).

font-I noted earlier that browsers aren’t consistent about how heavy they make in-between values, such as 500 or 600 Because bolder and lighter move up

or down in steps of 100 , it’s possible that a bolder (or lighter ) rule may have no effect If the default is 400 , and the browser does not render 500 as

700 but as 400 , an increase of 100 is meaningless For this reason it’s bly better to use explicit numeric values or the keyword bold for cross- browser consistency.

proba-The font-variant Property

Only one type of variant font can be set with the font-variantproperty, a variant wherelowercase letters are represented with smaller versions of capital letters The three possi-ble values for font-variantare shown in Table 8.3; the default value is normal, and ifthere is a value set on the containing box, it will be inherited

TABLE 8.3 Values for the font-variantProperty

normal Uses normal lowercase letters

small-caps Uses small capitals instead of lowercase letters

inherit Uses the value of the containing box’s font-variant property

An example of font-variantis shown in Figure 8.3; the rule used is

#a { font-family: Verdana, sans-serif;

font-variant: small-caps; }

8

Workaround for Netscape 4

Netscape 4 doesn’t understand the font-weight value of lighter To make fonts lighter in Netscape 4, give explicit numeric values, such as 200

F IGURE 8.3

Using font-variant:

small-capsin Opera 6.

The font-style Property

To set something in an italic or oblique font, you can use the font-styleproperty;font-styleis not used for anything else, although the name seems deceptively general.The values for font-styleare shown in Table 8.4 If there’s a font-styleproperty set

on the containing box, it will be inherited Otherwise, the default will usually be normal,although some HTML properties, such as <i>,<em>, and <address>, are normally itali-cized by Web browsers

TABLE 8.4 Values for the font-styleProperty

normal Uses a non-oblique, non-italic font

oblique Uses an oblique or slanted font

inherit Uses the value of the containing box’s font-style property

What is oblique ? Although it’s a less common term than italic , it’s a related concept.

Most fonts we see are called Roman fonts; these are not slanted, and they

correspond to the CSS value of normal An italic font is created by making

slanted, slightly curly alternate versions of the letters in a Roman font; each letter has been redesigned so that it’s essentially a new set of characters within the same font family.

An oblique font, on the other hand, is created simply by tilting the Roman

font’s characters at an angle This doesn’t always require font redesign and can be done automatically by a computer, but often the results are not nearly as nice looking Many typography books explicitly discourage the use

match-Figure 8.4 shows the lack of difference between obliqueanditalicas displayed bycurrent browsers; they’re both rendered the same, in slanted text This is unfortunate fortypographers, but for most of us it won’t be a major problem The code used in thisscreenshot was

<div style="font-style: normal;">

This is Roman text.

</div>

<div style="font-style: italic;">

This is italic text.

</div>

<div style="font-style: oblique;">

This is oblique text.

</div>

8

F IGURE 8.4

Oblique versus italic in Netscape 6.

You can use the font-stretchproperty to select a thinner or wider font in CSS

Condensed type is narrower and looks as though it’s been pressed together from the leftand right sides; conversely, expanded type looks as though it’s been pulled out andstretched to be wider Values for font-stretchare shown in Table 8.5; the default is

normal, and this value can be inherited from the containing box

TABLE 8.5 Values for the font-stretch Property

ultra-condensed Most narrow

extra-condensed Very narrow

semi-condensed Somewhat narrow

semi-expanded Somewhat wider

extra-expanded Very wide

wider Increase by one step over inherited value

narrower Decreases by one step below inherited value

inherit Uses the font-stretch value of the containing box

Unfortunately, no browser currently supports the font-stretch property This is the reason there’s no screenshot of these values in action If you need

to use a condensed font, you should name the specific condensed font as one of the fonts in font-family , such as

h2.compressed { font-family: "Arial MT Condensed Light",

Arial, sans-serif; }

See the discussion later this hour on font availability.

Not all fonts of the same point size look like they’re the same size For example, point Verdana looks much larger than 12-point Times New Roman Why is that if they’reboth 12 point?

12-To understand the reason for that, and to understand how to use font-size-adjust, youneed to understand how font sizes are measured A font size is measured from the bottombaseline to the top of the capital letters; this unit is called the em, as we’ve discussedbefore and used in our CSS properties for borders, margins, and padding

Another unit of measure is the ex; the ex is the measurement from the bottom baseline up

to the top of the lowercase letters (historically, this was measured to the top of a case x)

The ratio of the ex to the em is called the aspect value of the font Fonts with larger

aspect values are going to look larger because the uppercase letters will be the samesize, but the lowercase letters will be taller and usually wider This is why 12-pointVerdana looks larger than 12-point Times New Roman; Verdana has a larger aspectvalue Aspect values of common fonts are given in Table 8.6; these are listed in theCSS Level 2 specification

T ABLE 8.6 Aspect Values for Typical Web Fonts

Verdana 0.58 Comic Sans MS 0.52 Georgia 0.5 Times New Roman 0.46

So for Verdana,1exis0.58em, whereas1exin Times New Roman is 0.46em When youset the font-sizeproperty, the exvalue is calculated automatically from the emsize

You can use the ex unit in your designs—for example, setting the size of the

margin to 3ex —but I advise against it Because the ex varies considerably depending on the font and isn’t easily known in advance (unlike the em , which is based directly on font-size ), the ex is a much less reliable measure than the em

Thefont-size-adjustproperty allows you to tweak the size of the ex, changing theaspect ratio to another value You write a font-size-adjustrule like this:

selector { font-size-adjust: aspect-value; }

For example, to make your Verdana and Times New Roman fonts look closer to the samesize, use this type of CSS rule:

Don’t overlook that first function, resetting to default values! You can easily spend hours trying to debug your style sheet In addition to anything else a

font rule does, it also is equivalent to the following declarations:

font-family: serif; /* or the default browser font */

Afontrule looks like this:

selector { font: style variant weight size family; }

The values for weight,size, andfamilymust be specified in that exact order, but otherthan that the values can appear in any order Any values that aren’t listed are set to theirdefault values Here are some examples of fontshorthand rules:

body { font: 12pt normal "Times New Roman"; } h1 { font: 20pt Arial italic small-caps; } blockquote { font: bold "Courier New", sans-serif; }

When using fontit’s important to keep in mind that the first function of this property is

to reset values to their defaults; this means that priority order counts For example, sider these pairs of rules:

con-#a { font-weight: 700;

font: large Verdana, sans-serif; }

#b { font: large Verdana, sans-serif;

font-weight: 700; }

The font Shorthand Property

As you’ve probably noticed this hour, there are quite a few properties that define a font.Rather than typing out each property, the fontproperty allows you to set these values atone time

Thefontproperty is a shorthand property in CSS terminology A shorthand value has

two effects: it sets all affected properties to their default values, and it assigns designatedvalues to the appropriate properties The fontproperty is shorthand for the font-family,

font-size,font-weight,font-variant,font-style, andline-heightproperties.(You’ll learn about line-heightand how to use it with fontin Hour 12, “Alignmentand Spacing.”) The fontproperty doesn’t let you set values for font-stretchorfont- size-adjust; these need to be set in separate rules

h1 { font-family: "MS Sans Serif", Palatino, Helvetica,

"Bookman Old Style", "Times New Roman", Times, Garamond, Chicago, Arial, Geneva, Verdana, cursive; }

The browser will start looking through the list of fonts, and if it finds a match, it willuse that font So on my Windows computer, it might find “MS Sans Serif”and dis-play the <h1>in that font; on my Apple iBook, it won’t find "MS Sans Serif"andwill go on to the next one If the iBook has Palatino(which it does), that’s the fontfamily that will be used

The font property can also take values based on the user’s operating system fonts; these are discussed in detail in Hour 22, “User Interface and

Generated Content.”

Remember to include quotes around font names that are more than one word!

The Generic Font Families

In the long rule above, I included a generic font family name at the end—cursive Incase the browser can’t find any of the 11 named fonts, it will use the browser’s cursive

Macintosh) allow the user to set specific fonts tied to the generic families So on myNetscape 6, cursive might mean "Apple Chancery", whereas on yours it may be the

"Lucida Handwriting"font

The five generic font families in CSS are serif,sans-serif,cursive,fantasy, and

monospace To show you how different browsers (on two different operating systems)will display the generic font families, I’ve taken some screen shots Your browser maydisplay these differently as well; in most browsers you can reconfigure your generic fontfamilies depending on which fonts are installed on your system

In Figure 8.5, you can see the generic font families as shown in Netscape 6, running on

my iBook Macintosh laptop

F IGURE 8.5

Generic font families

in Netscape 6 (Macintosh).

Figure 8.6 shows you what the generic font families look like in Internet Explorer 6,running on my Windows desktop computer Notice that the serif,sans-serif,andmonospacefamilies are consistent with the iBook’s families, but the cursiveand

fantasyfamilies are very different Some of this is because we’re comparing twocomputers, each on its own operating system

In Figure 8.7, I’ve shown the generic font families as displayed by Opera 6 on the samecomputer I used to create the screenshot in Figure 8.6 Once again, the cursiveand

fantasyfamilies are the most variable, even on the same computer

F IGURE 8.6

Generic font families

in Internet Explorer 6 (Windows).

F IGURE 8.7

Generic font families

in Opera 6 (Windows).

Finally, Figure 8.8 shows how Internet Explorer on the Macintosh interprets the genericfont families Compare these fonts with those in the previous figures, and you’ll find thatthere’s little regularity across browsers—or even within browsers or operating systems—when using fantasyandcursivefamilies.

F IGURE 8.8

Generic font families in Internet Explorer 5.1 (Macintosh).

Generic font families are good for fallback; without them, your font face will be the gle default of the browser, usually something like "Times New Roman" However, they’renot very consistent, as you can see They are still better than the basic default, however,and you will want to include a generic family in each font-familyproperty value (or

sin-fontshorthand property value)

serif

In font terminology a serif is defined as the little feet or curved bits added to the end of

the straight lines that constitute a letter These help to make the characters easier to tinguish when reading, especially when reading print A serif font makes it much easier

dis-to distinguish among the number 1, the lowercase letter l, and the uppercase letter I, asshown in Figure 8.9

Serif fonts are often used for normal body text in Web browsers The default test font iscommonly"Times New Roman", which is usually the generic seriffamily font as well

However, serif fonts tend to display poorly on the screen compared with print, especially

at smaller font sizes Many Web developers will immediately change the font-family to anonserif font as the first rule of their style sheets

Other examples of serif fonts include "Bookman Old Style","Book Antiqua",

"Century Schoolbook",Garamond,"Goudy Old Style",Palatino, andSonoma ThefontTimesis similar to "Times New Roman", and it’s often useful to specify both ofthose fonts together, like this:

blockquote { font-family: "Times New Roman",

Times, serif; }

sans-serif

The prefix sans means “without,” so a sans-serif font is one that does not have serifs.

Sans-serif fonts look cleaner and more streamlined than serif fonts, and they often fit ter on most Web pages (Not all Web designs are the same, though, and you can manytimes find uses of both serif and sans-serif fonts, often within the same style sheet.) Asans-serif font is shown in Figure 8.10

bet-F IGURE 8.9

Serif fonts make it easier to distinguish letters.

Serif “feet”

The most common sans-serif font is Arial; its near relatives are HelveticaandGeneva.Another important font is Verdana, which was specifically developed for on-screen dis-play; it is wider than Arialand easier to read, especially at smaller sizes Other exam-ples of sans-serif fonts are "Century Gothic",Chicago, Futura, and Tahoma.

cursive

Thecursivegeneric family is very variable; it refers to any font that was based on theway people handwrite text There are no real standards on what the default cursive familyshould be, which is why it is different from computer to computer and even from

browser to browser Examples include "Script MT Bold","Apple Chancery", Swing,and"Lucida Handwriting"; in Figure 8.11, you can see one example of a cursive font.Cursive fonts tend to be very difficult to read onscreen and probably should be avoidedunless you have a very specific reason to use one, such as the writer’s name after a letter,styled to represent a written signature

F IGURE 8.10

Sans-serif fonts have

a more modern look than serif fonts.

Workaround for Netscape 4

Netscape 4 doesn’t recognize the cursive font family; therefore, you should specify another generic family, as well, such as serif :

sig { font-family: "Lucida Handwriting", cursive, serif; }

F IGURE 8.11

One browser’s cursive font.

fantasy

Thefantasygeneric family is even more of a grab bag than the cursivefamily; anyirregular, somewhat-whimsical font falls into this category Some are old woodcut-styleornate letters; some are bizarre squiggles; some look like animals; and some look likeletters cut from newspapers for a ransom note Figure 8.12 has an example of a font fromthefantasygeneric family

Because the fantasygeneric family is so undefined and because browsers have interpretedthis as a catchall for any strange fonts that may come along, a declaration of fantasycouldproduce text that looks like anything For example, on my browser it may display in acomic book printed font, but on yours it could appear in an old English woodcut font

Because this kind of irregularity makes it hard to design effectively, you’ll probably want

to avoid using this family

Workaround for Netscape 4

Because Netscape 4 doesn’t understand the fantasy generic family, either, use the same workaround you used for cursive (adding an additional generic family) if you choose fantasy

The term monospace means that each letter is displayed in the same amount of space;columns of text line up, for example, so that the 15th character from the left is always atthe same location This is rather like an old typewriter (Soon I may be unable to use thatanalogy!) The code samples in this book are set in a monospace font, as is anything youtype, such as property values and the names of properties and selectors Figure 8.13 is anexample of the monospacegeneric family

The most common monospace font family is "Courier New", and this is the defaultmonospace value on pretty much every browser Courieris an older version of "Courier New"; you may want to list both of these to ensure a greater likelihood of a font match.Other monospace fonts include "Andale Mono",VT102, andMishiwaka

Commonly Installed Fonts

Because there’s so much variance among computers, you may not be able to know withcertainty whether or not a given font will appear on a user’s computer She might beusing Internet Explorer 6 on Windows, but she also could’ve decided to delete Arialentirely! (Why someone would do this, I'm not quite sure.)

F IGURE 8.12

One of many possible fantasy fonts.

However, it’s possible to devise a list of relatively safe fonts—those that are found onmost operating systems and browsers You should continue to use generic families asfallbacks, but these are relatively safe

The common fonts are "Times New Roman",Times,Arial,Helvetica,Geneva,Verdana,

"Courier New", andCourier Other fonts are less reliable

Downloadable Fonts and Font Descriptors

To overcome the problem of uninstalled fonts, the Cascading Style Sheets Level 2

speci-fication defines a way to specify downloadable fonts These fonts will be retrieved from

the Web automatically and used to display the page

A downloadable font is declared by a @font-facerule, and various attributes of that fontare defined by font descriptors—properties that look like ordinary CSS values but thatdescribe qualities of the font A @font-facerule looks like this:

@font-face { font-family: "name of font";

src: url("url of font");

other font descriptors }

The list of other font descriptor properties is long and includes all of the font properties

F IGURE 8.13

The letters of monospace fonts line up in columns.

Browser Support for Downloadable Fonts

There are two competing technologies and formats for downloading fonts The first one,

Embedded OpenType from Microsoft, supports @font-face rules, but you need to use

their Web Embedding Fonts Tool (WEFT) to prepare eotfiles Only Internet Explorerrunning on Windows supports eotfiles You can learn more about WEFT at theMicrosoft typography site,http://www.microsoft.com/typography.

The second method of embedding fonts was developed by the company Bitstream and

has the name TrueDoc TrueDoc uses portable font resource files (.pfr), which are linked

in HTML as follows:

<link rel="fontdef" src="url">

Only Netscape 4 displays pfrfiles, although an ActiveX plug-in is available fromBitstream to allow access by Internet Explorer (Windows) Netscape 6 and Mozilla donot support pfrfiles For more on TrueDoc, see http://www.truedoc.com/

There are two major problems with both types of downloadable fonts: support and speed.Opera, Netscape 6, and Mozilla do not support downloadable fonts, and neither eotnor.pfrare cross-platform compatible; this means there is not a single usable standard thatwill work on most browsers As for speed, each additional downloadable font you addincreases the download and display time of your Web page, and if it’s simply for a pre-sentational effect, including the additional fonts may not be worth it

Summary

When you specify a font, you’re actually selecting a font from a set maintained by theuser’s browser and operating system The various font properties, such as font-weight,font-variant, font-style, and font-size, narrow down the fonts within a specific font-familyto find the right one to use All of these properties can be specified usingthefontshorthand property

There are five generic font families—serif,sans-serif, cursive, fantasy, and space—that are used if the user’s computer doesn’t contain a font you specify A shortlist of common fonts is available on all browsers CSS describes a method for download-ing fonts on demand, but unfortunately neither of the two competing methods for down-loading fonts is very reliable

Browser Support Report Card

The font-weight property B+ Inconsistencies among browsers The font-variant property B+ Not supported by Netscape 4 The font-style property A- italic and oblique treated the same The font-stretch property D Unsupported

The font-size-adjust property D Unsupported The font shorthand property B+ See other font properties The serif generic family A

The sans-serif generic family A The cursive generic family B+ Workaround needed for Netscape 4 The fantasy generic family B+ Workaround needed for Netscape 4 The monospace generic family A

List of common fonts A Downloadable fonts ( @font-face ) D+ No standardization or cross-browser support

Q&A

Q I need to have specific fonts on my page, even if the user doesn’t have them on his computer Downloadable fonts don’t seem reliable What can I do?

A In such a case, you may want to create graphics of your text; assume we’re talking

about headers or navigation buttons The problem with text-as-graphics is that theimages don’t scale at all with the user’s preferences, which may make it harder forsome users with visual disabilities In any case, you need to remember to set the

altattribute on the HTML <img>tag to a value equal to the text on the graphic

Workshop

The workshop contains quiz questions and activities to help reinforce what you’ve learned

in this hour If you get stuck, the answers to the quiz can be found after the questions

Quiz

1 Consider the following HTML:

What numeric value (100to900) is the equivalent of the font weight on the word

(e.) Courier New

Answers

1 The value boldis inherited from the containing box, and it has a value of 700 The

bolderproperty value increases the inherited value by 100, so the total is 800

2 Here’s one way to write that rule using the fontproperty:

.double { font: oblique small-caps 700

x-large Verdana sans-serif;

font-size-adjust: 0.55;

font-stretch: condensed; }

Becausefont-size-adjustandfont-stretcharen’t included in the font

short-hand property, they have to be declared separately Note that the order of weight,

size, and family is used; hopefully, you remembered that the order does matter for

Explore the use of fonts in CSS with these optional projects

• View the Web page at http://www.cssin24hours.com/10/generic.htmlwithyour browser, and see how your browser’s generic family fonts compare with those

in Figures 8.5 through 8.8 Does your browser have preferences for changing thesedefaults?

• Create a Web page with a style sheet that uses a number of different fonts for ers, paragraphs, navigation, footers, tables, and anything else Go overboard withyour font choices, and then start decreasing the variety of fonts you use Discover

head-at whhead-at point “a lot” is “too many,” and discover how many fonts you really need

to make a Web page look right (My preference? No more than two or three.)

• To use downloadable fonts on your Web page, you’ll need to download software torepackage an existing font from your system Go to http://www.microsoft.com/

typographyfor.eoffonts, or go to http://www.truedoc.com/for.pfrfonts, andtry using these programs to make font files Are they worth the effort?

8

H OUR 9

Text Colors and Effects

Use of Cascading Style Sheets can transform a plain, boring page of textinto a visual treat, without even using any graphics to do so The CSSspecifications define ways to visually enhance your textual content, fromchanging the colors to adding drop shadows

In this hour, you’ll learn

• Additional ways to specify the color of text

• How to use color effectively in Web design

• How to add or remove underlines from your text

• How to add lines through or over your text

• Which CSS property allows you to change the case of your letters

• How to do text shadows in CSS, and which browsers support them

Text Colors

Colors are a key part of conveying information in a visual medium Giving

de-emphasize the importance; for example, new content can be marked with a bright,vivid color, and outdated content may be presented in a more muted hue.

As you already know, the colorproperty is the primary method for setting the ground color You can set the background color using the background-colorproperty,which we’ll look at in detail next hour

fore-The foreground coloris also used by other properties as a default color value if none isspecified For example, if a color value is omitted for the borderproperty, the fore-groundcolorwill be used

Specifying Color Values

CSS provides two ways to define a color The first is to use a color name, such as green

orblack; the second is to use a set of three RGB values, corresponding to the amount ofred, green, and blue desired RGB colors were introduced in Hour 2, “Getting Startedwith CSS,” and in this hour we’ll tell you other ways to specify a set of RGB values

Color Names

Back in Hour 2, you learned about the sixteen colors recognized by the CSS tions These color names—aqua,black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow—are well-supported by thebrowsers

specifica-Most browsers will accept other color names as well, such as pink,orange, cyan, and violet However, until a future version of CSS adds those colors to the official specifica-tion, it’s probably best to avoid using such nonstandard colors There’s no guarantee that

a compliant browser will support them, so you’re safer with RGB values

There are some other colors that are accepted by browsers as well; those are based on the

user’s operating system preferences and are called system colors In Hour 22, “User

Interface and Generated Content,” you’ll learn more about system colors and how to usethem in your Web design

RGB Color Values

To specify a color in RGB notation, you need to know how much red, green, and blue iscontained in that color Web colors are a bit strange at first if you’re not used to them;they’re not at all like mixing paints as a child For example, when you’re blending paintcolors, you mix red and yellow to make orange When you’re making RGB colors, youmix red and green to make yellow! If you did that with paint, you’d get some ugly,muddy gray-brown shade