CSS3 Font
Rules CSS3 @ font-face
Previous versions of CSS3, web designers had to use on the user's computer is already installed fonts.
Use CSS3, web designers can use whatever font he / she likes.
When you find the file you want to use the font, the font file will simply be included in the website, it will be automatically downloaded to users' needs.
Font of your choice in the new version on CSS3 @ font-face rule description.
Your "own" fonts are defined in the CSS3 @ font-face rule.
Browser Support
Figures in the table represent the first browser to support the version number of the property.
属性 | |||||
---|---|---|---|---|---|
@font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Internet Explorer 9+, Firefox, Chrome, Safari, and Opera support WOFF (Web Open Font Format) fonts.
Firefox, Chrome, Safari, and Opera support .ttf (True Type fonts) and .otf (OpenType) font font type).
Chrome, Safari and Opera also support SVG fonts / collapsed.
Internet Explorer also supports EOT (Embedded OpenType) fonts.
Note: Internet Explorer 8 and earlier versions do not support the new @ font-face rule.
You need to use the font
In the new @ font-face rule, you must first define the font name (such as myFirstFont), and then point to the font file.
Tip: URL use lowercase font, capital letters in IE will produce unexpected results |
To use the font for HTML element, to refer to the font name (myFirstFont) by font-family properties:
Examples
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
Use bold text
You must add another @ font-face rule containing the bold text:
Examples
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
The file "Sansation_Bold.ttf" is another font file that contains Sansation boldface font.
Using this browser text font family time "myFirstFont" should be rendered as bold.
So you can have many of the same font @ font-face rule.
CSS3 font description
The following table lists all the font description and the inside of the @ font-face rule definition:
Descriptor | value | description |
---|---|---|
font-family | name | Required. Provisions of the font name. |
src | URL | Required. Defined URL font file. |
font-stretch |
| Optional. Define how to draw the font. The default is "normal". |
font-style |
| Optional. Defines the font style. The default is "normal". |
font-weight |
| Optional. A custom font weight. The default is "normal". |
unicode-range | unicode-range | Optional. Custom font support UNICODE character range. The default is "U + 0-10FFFF". |