Wednesday 26 June 2013

CSS3 Web fonts

Q:What is web fonts?

Ans:The term Web fonts generally refers to the use of @font-face.Font-face allows us to specify which fonts are used within our sites.
Q:What is the advantage of Web fonts?

Ans:It eliminates the complicated workaround for designers
.

History of font face
@font-face was part of css2 specification but it was dropped in css2.1 specification. But again it introduced in CSS3 specification.

Browser support for @font-face

Browser Namefont-face supportformat supported
IE 4+Yeseot
Mozilla Firefox 3.5+Yeswoff
Chrome 4+Yesttf,off
Opera 10+Yesttf,otf,svg
Safari 4+Yesttf,otf







 
 
@font-face Syntax

@font-face
 
{
    font-family:'fontfamilyname';
    src:url('../Folder wherefonts are stored/downloadedfont.eot'); /*For IE*/
    src:local('?'),url('../Folder wherefonts are stored/downloadedfont.woff')format('woff'),    
    url('../Folder wherefonts are stored/downloadedfont.ttf')format('truetype'),    
    url('../Folder wherefonts are stored/downloadedfont.svg#webfont4CzPTNtF')format('svg');
    font-weight:normal;
    font-style:normal;
}
 
 
Q;How to use ?
Ans:It can be uses as a normal syntax for font-family;
eg.
        body
        {
            background: #fff;
            color: #000;
            font-family:fontfamilyname;
            margin: 40px 0;
        }


Good Luck... :)

No comments:

Post a Comment