With css3, web designers are no longer forced to use only “web-safe” fonts.
A. @ Font-face Rule:
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).
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).
No comments:
Post a Comment