Home > Developer > Web Develop
Personally, Webfont is divided into two types:
The first is the real text font, the client does not install the font by remote loading fonts to implement special fonts to improve the user experience;
icodon.com:http://icodon.com/google-web-font.html (loading fonts from Google)
Iconfont : http://www.iconfont.cn/webfont/#!/webfont/index (loading fonts from Iconfont)
Load font code from Google:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"><title>Googlefont</title><Linkhref= ' Http://fonts.googleapis.com/css?family=Wire+One 'rel= ' stylesheet 'type= ' Text/css '><style>body,html{font-family:' Wire One ', Sans-serif;font-size:50px;}</style></Head><Body>tianqibucuo/nice weather.</Body><Scripttype= "Text/javascript">Webfontconfig={google: {families: ['Wire+one::latin' ] }};(function() {varWF=Document.createelement ('Script'); Wf.src= ('https:' ==Document.location.protocol? 'HTTPS' : 'http') +'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; Wf.type= 'Text/javascript'; Wf.async= 'true';vars=document.getElementsByTagName ('Script')[0];s.parentnode.insertbefore (WF, s);}) (); </Script>';</HTML>
Effect:
Disadvantage: Foreign Web site loading slow (can use 360CDN http://libs.useso.com/), there is a foreign font for Chinese almost no use;
To load code remotely from Iconfont :
<!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/TR/xhtml1/DTD/ Xhtml1-transitional.dtd "><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head><Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /><title>Googlefont</title><style>@font-face{font-family:' Webfont ';src:url ('//at.alicdn.com/t/frmlgzfyv4an61or.eot '); /*IE9*/src:url ('//at.alicdn.com/t/frmlgzfyv4an61or.eot #iefix ') format (' Embedded-opentype '),/*IE6-IE8*/url ('//at.alicdn.com/t/frmlgzfyv4an61or.woff ') format (' Woff '),/*Chrome, Firefox*/url ('//at.alicdn.com/t/frmlgzfyv4an61or.ttf ') format (' TrueType '),/*Chrome, Firefox, Opera, Safari, Android, IOS 4.2+*/url ('//at.alicdn.com/t/frmlgzfyv4an61or.svg#notosanshans-black ') format (' SVG '); /*IOS 4.1-*/}. Webfont{font-family:' Webfont '!important;font-size:50px;}</style></Head><Body> <Divclass= "Webfont">tianqibucuo/nice weather.</Div></Body></HTML>
Its function is the same, but so far I have not used in the project;
The second is the ICO icon that uses SVG to make the font.
The video teaching of Mu lesson net: http://www.imooc.com/view/243;
Iconfont: http://v.youku.com/v_show/id_XNjQwMTEyMDQw.html;
Foreign this kind of web site that uploads SVG to generate fonts in addition to the Icomoon:https://icomoon.io/app/#/select in the lesson video and fontello:http://fontello.com/of course there are some other websites. The use of the two sites is basically similar;
MU lesson video said in detail including some compatibility issues, Icomoon also dealt with:
Compatible with IE:
Src:url (' FONTS/ICOMOON.EOT?K1B9GW '); Src:url (' Fonts/icomoon.eot? #iefixk1b9gw ') format (' Embedded-opentype ')
Remember that the font code in the tag needs to be added &
The. Class:before name that he generated is actually the site setting class prefix or the default ' ico-' + upload svg name consisting of
@font-face { font-family: ' Icomoon '; Src:url (' FONTS/ICOMOON.EOT?K1B9GW '); Src:url (' Fonts/icomoon.eot #iefixk1b9gw ') format (' Embedded-opentype '), url (' FONTS/ICOMOON.WOFF?K1B9GW ') Format (' Woff '), url (' FONTS/ICOMOON.TTF?K1B9GW '), Format (' TrueType '), url (' fonts/icomoon.svg?k1b9gw# Icomoon ') format (' SVG '); Font-weight:normal; Font-style:normal;}. icon { font-family: ' Icomoon '; Speak:none; Font-style:normal; Font-weight:normal; Font-variant:normal; Text-transform:none; line-height:1; /* Better Font Rendering =========== */ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}. Icon-phone:before { content: "\e600";}. Icon-star:before { content: "\e601";}If you want to write this class name yourself, you'll have to find the 16-bit code in the corresponding content from the demo.html in his compressed package.
There is the Asiafont Studio 4, Fontcreator software that is compiled from the font to open the generated font Icomoon.ttf find the encoding you want to use
I personally prefer to use the software, to facilitate the next modification, delete after the comparison, the current project used in the Icomoon on the generated font;
In the Iconfont video, the operation is very detailed:
The code generated on Iconfont:
@font-face {font-family: "Iconfont"; Src:url (' Iconfont.eot '); /* ie9*/ src:url (' Iconfont.eot? #iefix ') format (' Embedded-opentype '),/* IE6-IE8 * /url (' Iconfont.woff ') Format (' Woff '),/* Chrome, Firefox */ URL (' iconfont.ttf ') format (' TrueType '),/* Chrome, Firefox, opera, Safari, Android, iOS 4.2+*/ url (' iconfont.svg#iconfont ') format (' SVG ');/* iOS 4.1-*/}.iconfont { font-family: " Iconfont "!important; font-size:16px; Font-style:normal; -webkit-font-smoothing:antialiased; -webkit-text-stroke-width:0.2px; -moz-osx-font-smoothing:grayscale;}. Icon-phone:before {content: "\e600";}. Icon-star:before {content: "\e601";}Web-font Personal Learning Summary
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
