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

This article introduces the knowledge of "how to use CSS3@font-face attributes". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

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 * /

}

Effect picture:

That's all for "how to use CSS3@font-face properties". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.