HTML and CSS Reference
In-Depth Information
You will find that very few fonts support the complete range of weights; in this case, the browser uses the nearest
weight to the one you specified.
Because both of the Google Web Fonts used for Cool Shoes & Socks are available only in “Normal 400,” much like
how a browser can render an oblique font style using the normal font, a browser can also render bolder and lighter
fonts if an alternative weight of font is not present.
1.
In styles.css, add a declaration to the
.button
rule set to make its text bold:
font-weight: bolder;
2.
Save styles.css.
The More Information button
<a class=”button purchase” href=”#” title=”Purchase
product”>
and Sign Up button
<input class=”button” id=”submit-newsletter”
type=”submit” value=”Sign Up” />
inherit a default
font-weight
of
normal
. By chan-
ging the
font-weight
to
bolder
, you tell the browser to make the font of those buttons heavier than
normal
. The “Average” font has no weight variants, so the browser takes the normal font and renders it as
bold (or 700).
3.
Add a declaration to the
label
rule set to change the weight of the input labels in the Newsletter box:
font-weight: 900;
4.
Save styles.css.
Although this declaration for the
label
rule set is different from that of the
.button
rule set, the same effect is
achieved because the “Average” font doesn't have a 900 variant. The browser again takes its own action and renders
the font bold.
Obviously, it's better to be consistent with
font-weight
. Although the “Average” font doesn't have any styles
other than “Normal 400,” fallback fonts (the ones specified in the font stack) may have, in which case
font-
weight: bolder;
and
font-weight: 900;
may
be rendered differently. If you like, change the previously
added declarations to
font-weight: bold;
or
font-weight: 700;
to keep them consistent.
font-size
Initial value:
medium
| Inherited: Yes | Applies to: All | CSS2.1
Browser support: IE 5.5+, Firefox 1+, Chrome 1+, Opera 7+, Safari 1+
The
font-size
property controls the layout of the text on a web page. You can change
font-size
in many
ways, each with advantages and disadvantages. As already established, Cool Shoes & Socks uses the em unit for not
just font sizes but also other properties such as
padding
and
margin
.
Let's come back to using the em unit for
font-size
in a moment, but first see what other methods you can use to
change the font size.
Keywords
Similar to
font-weight
,
font-size
can be changed using a series of keywords:
xx-small
,
x-small
,
small
,
medium
,
large
,
x-large
, and
xx-large
. Likewise, you can use the keywords
larger
and
smal-
ler
to increase or decrease the font size relative to an element's inherited
font-size
.
