Web fonts are used to allows the fonts in CSS, which are not installed on local system.
Different web fonts formats
| Sr.No. | Font & Description |
|---|---|
| 1 |
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.
|
| 2 |
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts and developed by Microsoft
|
| 3 |
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.
|
| 4 |
SVG Fonts/Shapes
SVG allow SVG fonts within SVG documentation. We can also apply CSS to SVG with font face property.
|
| 5 |
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>
Fonts description
The following list contained all the fonts description which are placed in the @font-face rule −
| Sr.No. | Value & Description |
|---|---|
| 1 |
font-family
Used to defines the name of font
|
| 2 |
src
Used to defines the URL
|
| 3 |
font-stretch
Used to find, how font should be stretched
|
| 4 |
font-style
Used to defines the fonts style
|
| 5 |
font-weight
Used to defines the font weight(boldness)
|
No comments:
Post a Comment