Using Bold Text:
You must add another @font-face rule containing descriptors for bold text:
The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.
Syntax:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf')
,url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer only support .eot fonts.</p>
<div>
With CSS3, websites can <b>finally</b> use new fonts!
</div>
</body>
</html>
You must add another @font-face rule containing descriptors for bold text:
The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.
Syntax:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf'),
url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
Example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot') format("opentype"); /* IE */
}
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Bold.ttf')
,url('Sansation_Bold.eot') format("opentype"); /* IE */
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer only support .eot fonts.</p>
<div>
With CSS3, websites can <b>finally</b> use new fonts!
</div>
</body>
</html>
No comments:
Post a Comment