Web-font Personal Learning Summary

Source: Internet
Author: User

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>


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.