CSS3 ??

@font-face? CSS3? ?????. @font-face ??? ???? ? ?? ? ??? ??? ??? ??? ????. ? ?? ??? ???? ?? ?? ?????! ?? ???? IE? ?? ?? ??? ? ??? ??? ????. @font-face ??? IE4?? ?????? ??? ?????? ?? ??? ????. ?? ????? ???? ?? ????? ??, ??, ???? ??? ?? ???? ?? ???? ??? ?? ? ??? ??? ???? @font-face? ?? ??? ????.

?? @font-face? ?? ??? ???????.

@ ??-?? {

[??-??: <?? ??>]?

[src: [ <uri> [??(<string>#)] | < ??-??-??> ]#;]?

[???? ??: <urange>#;]?

[?? ??: <?? ??> ]?

[font-feature-settings: ??|<feature-tag-value>#;]?

[font-stretch: <font-stretch>;]?

[font-weight: <weight>];

[font-style: <style>];

}

? ??:

font-family: ???? ?? ??? ?????.

font-style: ??? ???? ?????.

font-variant: ???? ????? ????? ?????.

font-weight: ???? ??? ?????.

font-stretch: ???? ??? ??? ??? ?????.

font-size: ??? ?? ??? ?????.

src: ??? ?? ??? ?? ?? ?? ?? ??? ?????. ? ??? @font-face ????? ??? ? ????.

???? ????

@font-face?? ???? ??? ??? ?? ??? ?? ?? ?? ??? ??? ????. ?????? ??? ???? ?? ?????. ?? ??? ?? ??? ??? ?????? ?? ??? ??? ????? ?? ??? ???? ?? ?????. ?? ??? ??? ? ?? ??? ?? ???? ???????.

1. TrueTpe(.ttf) ??:

.ttf ??? Windows ? Mac?? ?? ?? ???? ???? RAW ????? ????? ????? ?? ????. ? ??? ???? ?????? [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile Safari4.2+]? ?????.

2. OpenType(.otf) ??:

. otf ??? TrueType? ???? ???? ?? ?? ???? ????? ? ??? ???? ????? [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10. 0+, iOS Mobile Safari4.2+];

3. ? ?? ?? ??(.woff) ??:

.woff ??? ? ?? ??? ?? ?? ?????. ??? TrueType/OpenType? ?? ???? ????? ??? ??? ?????. ? ??? ???? ?????? [IE9+, Firefox3.5+, Chrome6+, Safari3+, Opera11.1+]? ????.

4. Embedded Open Type(.eot) ??:

.eot ??? IE? ?? ?????. ? ??? ???? ????? [IE4+]???.

5. SVG(.svg) ??:

.svg ??? SVG ?? ???? ???? ?? ?????. ? ??? ???? ?????? [Chrome4+, Safari3.1+, Opera10. +, iOS ??? Safari3.2+].

??: ? ???? ???? ??? ????? ?? ?? ?? ??? ?????? ???! ! !

???

???? ??

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> <style type="text/css"> * {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 a i { color:#fc0;} .layout li a:hover i { color:#fff;} @font-face { font-family: "icomoon"; src:url('fonts/icomoon.eot?-9731bi'); /*↑兼容IE9兼容模式打開IE8及其以下瀏覽器可以顯示;*/ /*↓兼容IE9可以顯示;*/ 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 { 微軟開發(fā)用于嵌入網(wǎng)頁中的字體,IE專用字體; } **WOFF { Web字體中最佳格式,被W3C推薦; } **TTF { 由Microsoft和Apple聯(lián)合開發(fā)的一套字體標準,是Mac OS和Win操作系統(tǒng)中最常見的的一種字體; } **SVG { 用于SVG字體渲染的一種格式,是由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; /*抗鋸齒屬性*/ } </style> </head> <body>   <ul class="layout"> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li><a href="#"><i class="icon"></i></a></li> <li class="last-child"><a href="#"><i class="icon"></i></a></li> <div class="clear"></div> </ul> </body> </html>

?????? ???

????