HTML and CSS Reference
In-Depth Information
A subtle difference you may have noted is that the original example used a
font-weight
of
bold
, but the second example used a
font-weight
of
normal
. This
is because the
@font-face
rules explicitly specified the bold versions of
the fonts, but it's possible to handle that directly with
font-face
.
The browser has two options when bold text is needed: it can either use
a bold version of the font if one is available or scale up the normal font
to make it look bold.
Let's start with some normal text
using the Yanone Kaffeesatz font:
<p>Hello! HTML5 and CSS3</p>
Here's the
CSS
:
@font-face {
font-family: "Yanone Kaffeesatz";
src: url(YanoneKaffeesatz-Regular.otf) format("opentype");
}
p {
font-size: 32px;
font-family: "Yanone Kaffeesatz";
}
Now add a couple of elements that
will render as bold:
<p>Hello! <strong>HTML5</strong> and
<strong>CSS3</strong></p>
