Home > Developer > Web Develop
CSS3 @font-face Rules
Before CSS3, the web designer must use fonts that have been installed on the user's computer.
Css3,web designers can use any font they like.
When you find or buy the font you want to use, you can store the font file on the Web server, which is automatically downloaded to the user's computer when needed.
Your "own" font is defined in the CSS3 @font-face rule.
Firefox, Chrome, Safari, and Opera support. TTF (True type Fonts) and. OTF (OpenType Fonts) types of fonts.
Internet Explorer + + supports the new @font-face rules, but only the. EoT type of font (Embedded OpenType) is supported.
Note: Internet Explorer 8 and earlier versions do not support the new @font-face rules.
Use the font you need
In the new @font-face rule, you must first define the name of the font (such as Myfirstfont), and then point to the font file.
To use fonts for HTML elements, refer to the name of the font (Hovertreefont) through the Font-family property.
First look at the effect: http://hovertree.com/texiao/css/5.htm
Full HTML code:
<!DOCTYPE HTML><HTML><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"/> <Metaname= "Viewport"content= "Width=device-width, initial-scale=1" /> <title>CSS3 Customizing Fonts-What to ask</title><BaseTarget= "_blank"/> <MetaCharSet= "Utf-8" /> <style>@font-face{font-family:Hovertreefont;src:url (' Http://hovertree.com/themes/fonts/Sansation_Light.ttf '), url (' http://hovertree.com/themes/fonts/ Sansation_light.eot '); /*ie9+*/ }@font-face{font-family:Hovertreefont;src:url (' Http://hovertree.com/themes/fonts/Sansation_Bold.ttf '), url (' http://hovertree.com/themes/fonts/ Sansation_bold.eot '); /*ie9+*/Font-weight:Bold; }. Hvtbold{font-family:Hovertreefont; }. Hvtbold a{font-family:Hovertreefont;}a{Color:Blue}Div{font-size:16px;font-family:Arial, Sans-serif,nsimsun, "\5b8b\4f53";Border:1px solid Green;margin:5px;}</style></Head><Body> <Divclass= "Hvtbold">the effect of adding a custom font:<BR/><BR/>with CSS3, websites can<b>Finally</b>Use fonts other than the pre-selected "Web-safe" fonts. <BR/><BR/>How to ask Hovertree.com<BR/><BR/><b>Collayi http://keleyi.com</b><BR/><BR/><ahref= "http://hovertree.com/down/">ASP. NET CMS source code download</a><BR/><BR/><ahref= "Http://hovertree.com/hvtart/bjae/is0xr36t.htm">Original</a> <ahref= "http://hovertree.com/">Home</a> <ahref= "http://hovertree.com/down/">More effects</a> </Div> <Div>Do not add custom font effects:<BR/><BR/>with CSS3, websites can<b>Finally</b>Use fonts other than the pre-selected "Web-safe" fonts. <BR/><BR/>How to ask Hovertree.com<BR/><BR/><b>Collayi http://keleyi.com</b><BR/><BR/><ahref= "http://hovertree.com/down/">ASP. NET CMS source code download</a><BR/><BR/><ahref= "Http://hovertree.com/hvtart/bjae/is0xr36t.htm">Original</a> <ahref= "http://hovertree.com/">Home</a> <ahref= "http://hovertree.com/down/">More effects</a> </Div></Body></HTML>
Web Front End: http://www.cnblogs.com/jihua/p/webfront.html
CSS3 using a custom font
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
