Home > Developer > JavaScript
@ Font-face: font-face
HTML
1 <body> 2 <! -- Ul. layout> li * 5> a [href = #]> I. icon --> 3 <! -- Sublime Text quick spelling --> 4 <ul class = "layout"> 5 <li> <a href = "#"> <I class = "icon" >&# xe601; </I> </a> </li> 6 <li> <a href = "#"> <I class = "icon" >&# xe600; </I> </a> </li> 7 <li> <a href = "#"> <I class = "icon" >&# xe602; </I> </a> </li> 8 <li> <a href = "#"> <I class = "icon" >&# xe603; </I> </a> </li> 9 <li class = "last-child"> <a href = "#"> <I class = "icon"> & # xe604; </I> </a> </li> 10 <div class = "clear"> </div> 11 </ul> 12 </body>
CSS
1 <style> 2 * {margin: 0; padding: 0;} 3 body {background-color: # fc0; padding-top: 50px ;} 4 ul li {list-style: none;} 5 a {text-decoration: none;} 6. clear {clear: both;} 7. layout {width: 604px; margin: 0 auto;} 8. layout li {display: block; float: left; border-right: 1px solid #930808;} 9. layout li. last-child {border-right: none;} 10. layout li a {display: block; width: 120px; height: 120px; Line-height: 120px; text-align: center; background-color: # f00;} 11. layout li a I {color: # fc0;} 12. layout li a: hover I {color: # fff;} 13 @ font-face {14 font-family: "icomoon"; 15 src: url ('fonts/icomoon. eot? -9731bi '). You can enable IE8 and the following browsers in 16/* compatible with IE9: */17/* compatible with IE9: */18 src: url ("fonts/icomoon. eot? # Iefix ") format (" embedded-opentype "), 19 URLs (" fonts/icomoon. woff ") format (" woff "), 20 URLs (" fonts/icomoon. ttf ") format (" truetype "), 21 url (" fonts/icomoon. svg ") format (" svg "); 22/* EOT {fonts used by Microsoft to embed Web pages, IE fonts;} 23 ** WOFF {the best format in Web Fonts, recommended by W3C;} 24 ** TTF {a set of font standards jointly developed by Microsoft and Apple, the most common font in Mac OS and Win operating systems ;} 25 ** SVG {a format used for SVG font rendering. It is an open standard drawing format developed by W3C;} 26 */27 font-weight: normal; 28 font-style: normal; 29} 30. icon {31 font-family: "icomoon"; 32 font-style: normal; 33 font-weight: normal; 34 font-size: 90px; 35-webkit-font-smoothing: antialiased; 36-moz-osx-font-smoothing: grayscale; 37/* anti-aliasing attribute */38} 39 </style>
SHOW
Font icon download Website: Icomoon
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
