Rules CSS3 @ font-face
Examples
Specify a font named "myFirstFont", and specify where to find its URL:
{
font-family: myFirstFont;
src: url ( 'Sansation_Light.ttf'),
url ( 'Sansation_Light.eot'); / * IE9 * /
}
try it"
Browser Support
Internet Explorer 9, Firefox, Opera, Chrome, and Safari support @ font-face rule.
However, Internet Explorer 9 supports only .eot types of fonts, Firefox, Chrome, Safari, and Opera support .ttf and .otf two types of fonts.
Note: Internet Explorer 8 and earlier versions of IE do not support @ font-face rule.
Attribute definitions and instructions
@ Font-face rule, web designers no longer have to use "web-safe" fonts one.
Name of the font, font - face rules:
- font-family: myFirstFont;
Font files contained on your server somewhere, reference CSS:
- src: url ( 'Sansation_Light.ttf')
If the font file is in a different location, use the full URL:
- src: url ( '../../ www.w3cschool.css / css3 / Sansation_Light.ttf')
Is now ready to use the font, the following is an example of how to use it all the div element:
{
font-family: myFirstFont;
}
grammar:
- @ Font-face
{
font-properties
}
The following examples of fonts used in a div:
{
font-family: myFirstFont;
}
grammar
{
font-properties
}
Font description | value | Explanation |
---|---|---|
font-family | name | Required. Define the font name. |
src | URL | Required. Define the font download URL (S) |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Optional. Define how the font should be stretched. The default value is "normal" |
font-style | normal italic oblique | Optional. Define the font style should be like. The default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Optional. A custom font weight. The default value is "normal" |
unicode-range | unicode-range | Optional. The range is defined fonts support Unicode characters. The default value is "u + 0-10 FFFF" |
related articles
CSS3 tutorial: CSS3 Fonts