Latest web development tutorials

CSS3 Font

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

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.

lamp 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:

OperaSafariChromeFirefoxInternet Explorer

Examples

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

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

try it"


Use bold text

You must add another @ font-face rule containing the bold text:

OperaSafariChromeFirefoxInternet Explorer

Examples

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

try it"

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
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
Optional. Define how to draw the font. The default is "normal".
font-style
  • normal
  • italic
  • oblique
Optional. Defines the font style. The default is "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
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".