The best CSS3 Font Tutorial In 2024, In this tutorial you can learn Rules CSS3 @ font-face,Browser Support,You need to use the font,Examples,Use bold text,Examples,CSS3 font description,
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.
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.
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:
You must add another @ font-face rule containing the bold text:
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.
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". |