CSS3 Fonts
With css3, web designers are no longer forced to use only “web-safe” fonts.A. @ Font-face Rule:
- Before CSS3, web designers had to use fonts that were already installed on the user's computer.
- With CSS3, web designers can use whatever font he/she likes.
- When you have found/bought the font you wish to use, simply include the font file in the web site, and it will be downloaded automatically to the user when needed.
- You will have to describe your selected font with the new CSS3 @font-face rule.
- In the @font-face rule you define a name for the font, and the URL to the font file:
To use the new font, add "myFirstFont" as the value of the font-family property:
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE */
}
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>background-origin </title>
<style type="text/css">
body{margin:0 auto; width:500px; background:#eee}
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer only supports .eot fonts.</p>
<div>
With CSS3, websites can finally use fonts other than the pre selected "web-safe" fonts.
</div>
</body>
</html>
Browser Support:
Internet Explorer only support fonts of type .eot (Embedded OpenType).Firefox, Chrome, Safari, and Opera support fonts of type .ttf (True Type Fonts) and .otf (OpenType Fonts).
B. 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.
@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>
CSS3 Font Descriptors
The following table lists all the font descriptors that can be defined insidethe @font-face rule:
| Descriptor | Values | Description |
| font-family | name | Required. Defines a name for the font |
| url | URL | Required. Defines the URL to the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |
No comments:
Post a Comment