CSS3 字體

@font-face是CSS3中的一個模塊，它主要是把自己定義的Web字體嵌入到你的網(wǎng)頁中，隨著@font-face模塊的出現(xiàn)，我們在Web的開發(fā)中使用字體就不用再為只能使用Web安全字體煩惱了！肯定會有人問，這樣的東西IE能支持嗎？我告訴大家@font-face這個功能其實早在IE4就支持了，你肯定會感到驚訝。如果你看到一些英文網(wǎng)站或blog看到一些很漂亮的自定義Web字體，比如說首頁的Logo，Tags以及頁面中的手寫英文體，一句話這些都是@font-face實現(xiàn)的。

首先我們一起來看看@font-face的語法規(guī)則：

@font-face {

[font-family: ;]?

[src: [ [format(#)]? | ]#;]?

[unicode-range: #;]?

[font-variant: ;]?

[font-feature-settings: normal|#;]?

[font-stretch: ;]?

[font-weight: ];

[font-style:

使用CSS3,網(wǎng)站終于可以使用字體以外的預先選擇“合法”字體。

注意: 需要引入外部字體文件顯示效果。

Weiter lernen

neue Datei

<!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>

einreichen Code zurücksetzen

Automatische Operation