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

Source: Internet
Author: User
Tags chrome developer
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)!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.