Tuesday 28 May 2013
Facebook StumbleUpon Twitter Google+ Pin It

CSS3 Fonts

With CSS3, web designers are no longer forced to use only web-safe fonts

The CSS3 @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, include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your "own" fonts are defined in the CSS3 @font-face rule.

Browser Support

PropertyBrowser Support
@font-face
Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support the WOFF (Web Open Font Format) font.
Firefox, Chrome, Safari, and Opera support fonts of type TTF (True Type Fonts) and OTF (OpenType Fonts).
Chrome, Safari and Opera also support SVG fonts/shapes.
Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier versions, do not support the @font-face rule.

Using The Font You Want

In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file.
lampTip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
OperaSafariChromeFirefoxInternet Explorer

Example

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>




Using Bold Text

You must add another @font-face rule containing descriptors for bold text:
OperaSafariChromeFirefoxInternet Explorer

Example

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

The file "Sansation_Bold.ttf" is another font file, that contains the bold characters for the Sansation font.
Browsers will use this whenever a piece of text with the font-family "myFirstFont" should render as bold.
This way you can have many @font-face rules for the same font.

CSS3 Font Descriptors

The following table lists all the font descriptors that can be defined inside the @font-face rule:
DescriptorValuesDescription
font-familynameRequired. Defines a name for the font
srcURLRequired. Defines the URL of the font file
font-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded
Optional. Defines how the font should be stretched. Default is "normal"
font-stylenormal
italic
oblique
Optional. Defines how the font should be styled. Default is "normal"
font-weightnormal
bold
100
200
300
400
500
600
700
800
900
Optional. Defines the boldness of the font. Default is "normal"
unicode-rangeunicode-rangeOptional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF"

-By Parthiv Patel

No comments: