Home > Developer > Web Develop
Today, we introduce a more commonly used method of embedding arbitrary fonts in Web pages, and this method is css mainly @font-face implemented by attributes.
The fonts文件夹 font used to store the output in this instance, which is css文件夹 used to store CSS styles and HTML pages for output presentationindex.html
View Preview Download Attachments
1) Get the three file formats you want to use to make sure the font is displayed correctly in the main browser.
. TTF or. OTF for Firefox 3.5, Safari, Opera
. EOT, for Internet Explorer 4.0+
. SVG, for Chrome, IPhone
Generally we are in some free Fonts are mostly in. ttf format, we can convert the. ttf format font file to another two formats, here is recommended an online conversion website fontsquirrel.com, online conversion address:/HTTP Www.fontsquirrel.com/tools/webfont-generator
Conversion method2) After acquiring the fonts in three file formats, we need to @font-face declare the font using the property
Case FONT:
Planet kosmos.ttf Click to download font access password: 7788
Bleeding Cowboys.ttf Click to download font access password: 6052
Haunted Mouse.ttf Click to download font access password: B2FB
@font-face {font-weight:normal;font-style:normal;font-family: ' Mywebfont '; Src:url (' Webfont.eot '); Src:url (' Webfont.eot #iefix ') format (' Embedded-opentype '), url (' Webfont.woff '), Format (' Woff '), url (' Webfont.ttf ') format (' TrueType '), url (' webfont.svg#webfont ') format (' SVG ');}fnont-family: ' Mywebfont ', MyWebFont for the definition of the font family, according to their own needs to change, but also need to replace the above code in the webfont name of their own font.
This example code is as follows:
@font-face {font-weight:normal;font-style:normal;font-family: ' Planet-webfont '; Src:url ('. /fonts/planet/planet-webfont.eot '); Src:url ('. /fonts/planet/planet-webfont.eot? #iefix ') format (' Embedded-opentype '), url (' ... /fonts/planet/planet-webfont.woff ') format (' Woff '), url ('.. /fonts/planet/planet-webfont.ttf ') format (' TrueType '), url ('.. /fonts/planet/planet-webfont. svg#planet-webfont ') format (' SVG ');}3) using fonts, first define the font attributes in the CSS, as follows:
P {font-family: ' Webfont ', Arial, Sans-serif;}There are 3 types defined in this example, the code is as follows:
h1{font-family: ' Planet-webfont ', Arial, Sans-serif;} h2{font-family: ' Bleeding cowboys-webfont ', Arial, Sans-serif;} h3{font-family: ' Haunted Mouse-webfont ', Arial, Sans-serif;4) This example also defines CSS for H1, H2, H3, p four tags
#h1css h1 {margin:0;font-weight:300;font-size:2.5em;text-align:center;padding:1.5em;} #h2css h2 {margin:0;font-weight:300;font-size:2.5em;text-align:center;padding:1.5em;} #h3css h3 {margin:0;font-weight:300;font-size:2.5em;text-align:center;padding:0.2em;}. Pcss p{text-align:center;color: #ffffff;} P A{color: #ffffff; text-decoration:none;} P A:hover{color:yellow;}. hr1{clear:both;border-bottom:1px solid #efefef; margin:40px 0;5) Add CSS style links <link rel= "style on related pages type= "Text/css" charset= "Utf-8"/>This example code:
<link rel= "stylesheet" href= "csstype=" Text/css "charset=" Utf-8 "/>
6) Finally let's take a look at index.html the code that invokes the Font style page
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "http://www.w3.org/TR/HTML4/loose.dtd ">Head><meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "><title> How to embed any font </title>styleSheettype= "text/css "href=" css/demo.css "/><body><div id=" h1css ">target = "_blank" >www.huangjianwei.com.cn</a></p></div></body></html ;
How to embed any font in a Web page
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
