Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use the font icon in css3 @ fant-face". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use the font icon in css3 @ fant-face" can help you solve your doubts.

HTML

The code is as follows:











CSS

The code is as follows:

* {margin:0; padding:0;}

Body {background-color: # fc0; padding-top: 50px;}

Ul li {list-style: none;}

A {text-decoration: none;}

.clear {clear:both;}

.layout {width:604px; margin:0 auto;}

.layout li {display: block; float: left; border-right: 1px solid # 930808;}

.layout li.last-child {border-right: none;}

.layout li a {display: block; width: 120px; height:120px; line-height: 120px; text-align: center; background-color: # f00;}

.layout li an i {color:#fc0;}

.layout li a:hover i {color:#fff;}

@ font-face {

Font-family: "icomoon"

Src:url ('fonts/icomoon.eot?-9731bi')

/ * ↑ compatible with IE9 compatible mode opens IE8 and the following browsers can display it; * /

/ * ↓ compatible with IE9 can be displayed; * /

Src:url ("fonts/icomoon.eot?#iefix") format ("embedded-opentype")

Url ("fonts/icomoon.woff") format ("woff")

Url ("fonts/icomoon.ttf") format ("truetype")

Url ("fonts/icomoon.svg") format ("svg")

/ * EOT {fonts developed by Microsoft for embedding in web pages, IE special fonts;}

* * WOFF {the best format in Web fonts, recommended by W3C;}

* * TTF {A set of font standards jointly developed by Microsoft and Apple is the most common font in Mac OS and Win operating systems;}

* * SVG {A format for SVG font rendering, an open standard graphics format developed by W3C;}

, /

Font-weight: normal

Font-style: normal

}

.icon {

Font-family: "icomoon"

Font-style: normal

Font-weight: normal

Font-size: 90px

-webkit-font-smoothing: antialiased

-moz-osx-font-smoothing: grayscale

/ * Anti-aliasing attribute * /

}

After reading this, the article "how to use font icons in css3 @ fant-face" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.