Custom Fonts
A new feature of CSS3 is custom fonts. You have seen that some of the sites have very stylish fonts in headings. This feature is imperviously achieved by Photoshop by creating an image of it or by using some font files. In case of using font files there is one problem and that is if you are using font files the you have to give an external link to user to first download and install the font to his computer.
But now CSS3 introduce a new feature to embed fonts to your site. Below is the simple code showing an example of it. If the font file is not available in the clients computer then it is automatically downloaded to the clients computer.
<!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=iso-8859-1" />
<title>Custom Fonts</title>
<style type="text/css">
@font-face
{
font-family: custom_head; /* choose any name you want */
src: url(fonts/28DaysLater.eot); /* For IE */
src: local(custom_head), url(../fonts/28DaysLater.ttf) format('opentype'); /* For all other browsers */
}
#customfonts
{
font-family:custom_head;
letter-spacing:2px;
font-size:24px;
width:400px;
margin:0 auto;
margin-top:50px;
}
#common
{
width:400px;
margin:0 auto;
margin-top:50px;
color:#ff0000;
}
</style>
</head>
<body>
<div id="customfonts">
Here is the example of custom fonts....
<br /><br />
Font Name : 28DaysLater
</div>
<div id="common">
The above font is a simple example of custom fonts. Download any font.
These are avaiable free of cost and use them to give good look
to your site.
</div>
</body>
</html>
Screenshot Below:-
Download complete code from the link
https://docs.google.com/leaf?id=0B2iokvd3EpXAYzQzOTU4OWYtNmVlNy00N2EwLWE3YjMtMjgzZjgxMjE2N2Fj&hl=en_US
Comments
Post a Comment