How to use the CSS3@font-face property
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!
