CSS3 Tutorial (7): CSS3 embedded fonts _css3_css_ Web Authoring

Web Authoring WEBJX Article introduction: Want to make some cool head effects and get rid of the Web site security fonts and do not use picture files? Then use CSS3 to embed fonts! Want to make some cool head effects and get rid of web security fonts and not use picture files? Then use CSS3 to embed fonts!

Want to make some cool head effects and get rid of web security fonts and not use picture files? Then use CSS3 to embed fonts!
Want to make some cool head effects and get rid of web security fonts and not use picture files? Then use CSS3 to embed fonts!
Previous: CSS3 Tutorial (6): Create Site multiple columns
To use a font, we first need to use the ' @font-face ' property. This must first prepare the font file that we want to use.
In spite of this, let's simply learn about the history of fonts. @font-face attribute has been considered from CSS2, but it has not yet appeared in CSS2.1. CSS3 tried to bring it to the standard.
If you don't have a font file on your hand, you can download some in dafont.com.
Cross-browser compatibility
Currently only Safari supports the @font-face feature (this feature is also supported by Google Chrome developer 2.0.156).
Note that your browser needs some time to load the font file, so for now, it's better to use a picture file instead of a CSS style user experience. CSS3 Embedding Fonts

The above effect can be implemented by the following style:
@font-face {font-family:qianduannet; Src:url ("Sketchrockwell.ttf"); fontface{font-family:qianduannet; Font-size: 3.2em; letter-spacing:1px; Text-align:center; }
We can also use shadow effects where font-face are used.

. fontfaceshadow{font-family:qianduannet; font-size:3.2em; letter-spacing:1px; text-align:center; text-shadow:3px 3p x 7px #111; }
Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8 RC1) (IE7 supports font files in EOT format)

Opera (9.6 ...) (Supports text shading)

Safari (3.2.1 windows ...)

The above is CSS3 tutorial (7): CSS3 Embedded Fonts _css3_css_ page production content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!