Shulou(Shulou.com)06/01 Report--

This article is about how to use @ Font-Face to implement custom fonts in CSS3. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use @ Font-Face to implement custom fonts

Several fonts are relatively safe in Web design, such as Arial,Helvetica, Verdana, Georgia, Comic Sans (Chinese, generally speaking, Arial is the only safe translator). Now, using @ font-face of CSS3 can specify fonts on your own, but because of copyright issues, the actual use of fonts is limited (in addition, large Chinese fonts are also a difficult problem to solve).

The syntax is as follows:

@ font-face {font-family:'Anivers'; src: url ('/ images/Anivers.otf') format ('opentype');}

Supported browsers: Firefox 3.1, Safari, Opera 10 and IE7 (it takes some twists and turns, if you are not afraid of trouble, you can implement this function in IE, please refer to: make font-face work in IE)

Although CSS3 is still under development, the above-mentioned features are already available in some browsers, especially Safari. Unfortunately, Safari is not a mainstream browser.

Firefox currently has a large user base, and the upcoming Firefox 3.1 supports a lot of CSS3 effects, because Firefox users are highly motivated to upgrade, so many users will be able to experience the new features of CSS3 in advance.

Google Chrome, which was just released this year, is based on the Webkit engine, so it is very similar to Safari, because Safari is mainly used in the Mac market, and Chrome can just fill the gap in the Windows market.

According to statistics, as of November 2008, 44.2% of users used Firefox, 3.1% used Chrome, and 2.7% used Safari, which means that some features of CSS3 can already support nearly half of Internet users, while in Web design circles, the proportion may be even higher, about 73.6% (data provided by Blog.SpoonGraphics)

Thank you for reading! This is the end of the article on "how to use @ Font-Face to achieve custom fonts in CSS3". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.