Web fonts are used to allows the fonts in CSS, which are not installed on local system.
Different web fonts formats
| Fonts |
Description |
| TrueType Fonts (TTF) |
TrueType is an outline font standard developed by Apple and
Microsoft in the late 1980s, It became most common fonts for both
windows and MAC operating systems |
| OpenType Fonts (OTF) |
OpenType is a format for scalable computer fonts and developed by Microsoft |
| The Web Open Font Format (WOFF) |
WOFF is used for develop web page and developed in the year of 2009. Now it is using by W3C recommendation. |
| SVG Fonts/Shapes |
SVG allow SVG fonts within SVG documentation. We can also apply CSS to SVG with font face property |
| Embedded OpenType Fonts (EOT) |
EOT is used to develop the web pages and it has embedded in webpages so no need to allow 3rd party fonts |
following code shows the sample code of font face
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>
It will produce the following result −
Fonts description
The following list contained all the fonts description which are placed in the @font-face rule −
| Values |
Description |
| font-family |
Used to defines the name of font |
| src |
Used to defines the URL |
| font-stretch |
Used to find, how font should be stretched |
| font-style |
Used to defines the fonts style |
| font-weight |
Used to defines the font weight(boldness) |
No comments:
Post a Comment