HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
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". |