Home > Developer > Web Develop
Before we want to use a beautiful font can only use picture font image, that is, the production process is slow, the user experience is not good enough, for the computer is also a load, and now CSS3 provides us with a new custom font properties: @font-face, not only easy to use, And it almost solves all of our problems before.
First on code: <! DOCTYPE html>
<meta Charset=utf-8 "/>
<TITLE>CSS3 Custom Fonts </title>
<style type= "Text/css" >
@font-face{
Font-family:myfont;
Src:url (' The Heart of Everything Demo.ttf '), url (' Sansation_light.eto ');
}
@font-face{
Font-family:myfont;
Src:url (' The Heart of Everything Demo.ttf '), url (' Sansation_bold.eot ');
}
Div{font-family:myfont;}
</style>
<body>
<div> Baidu a bit, beautiful you know. MyFont Baidu a bit, you know. How is you!</div>
</body>
The above is the basic method of reference, of course, in order to better compatible with different versions of the browser we can add some compatible wording, here will not repeat. Now we need to download fonts, personal comparison recommended http://www.dafont.com/theme.php?cat=101 a free font site, we can directly download the font we want, In the URL path above the selection of any of the font we want to the name of a good, we hope to be helpful.
Here are our browsing results:
650) this.width=650; "Src=" Http://s1.51cto.com/wyfs02/M01/84/19/wKiom1eFskfT3r--AABHmmfsUDg083.png-wh_500x0-wm_3 -wmp_4-s_1225584446.png "title=" 20160713111357.png "alt=" Wkiom1efskft3r--aabhmmfsudg083.png-wh_50 "/>
This article is from the "10975329" blog, please be sure to keep this source http://10985329.blog.51cto.com/10975329/1825988
Display a custom font using CSS3 's @font-face
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
