CSS3字體
CSS3?字體
在網(wǎng)頁中，我們可以用CSS的font-family屬性來定義字體，然而定義的字體在用戶的電腦上能否正確呈現(xiàn)則要看用戶的電腦是否安裝了該字體。我們經(jīng)常能看到國外的一些個人網(wǎng)站使用了非常漂亮的字體，而這些字體通常在用戶的電腦中是沒有安裝的，所以用font-family屬性就無法實現(xiàn)了，今天我們就介紹使用@font-face實現(xiàn)個性化字體。
說@font-face是CSS3的新特性并不準確，因為CSS2就已經(jīng)支持了這一特性，并且Internet Explorer早在第5版的時候就已經(jīng)支持它了，不過IE實現(xiàn)方式是通過自有的eot(Embeded Open Type)字體格式，其它瀏覽器都不支持這個格式。@font-face支持如下屬性：
font-family：設(shè)置文本的字體名稱。
font-style：設(shè)置文本樣式。
font-variant：設(shè)置文本是否大小寫。
font-weight：設(shè)置文本的粗細。
font-stretch：設(shè)置文本是否橫向的拉伸變形。
font-size：設(shè)置文本字體大小。
src：設(shè)置自定義字體的相對路徑或者絕對路徑。
使用您需要的字體
在新的 @font-face 規(guī)則中，您必須首先定義字體的名稱（比如 myFirstFont），然后指向該字體文件。
提示：URL請使用小寫字母的字體，大寫字母在IE中會產(chǎn)生意外的結(jié)果 ? ?
如需為 HTML 元素使用字體，請通過 font-family 屬性來引用字體的名稱 (myFirstFont)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf')
,url('Sansation_Light.eot'); /* IE9 */
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<p><b>注意:</b> Internet Explorer 9 只支持 .eot 格式的字體.</p>
<div>
使用CSS3,網(wǎng)站終于可以使用字體以外的預先選擇“合法”字體
</div>
</body>
</html>想要豐富多彩的頁面就需要有更多的字體樣式，人們想出了很多字體替代方案，除了@font-face方案外還有sIFR、Cufon、Typeface.js等，還有.webfont，簡單說，.webfont 就是在字體中嵌入了訪問許可表，瀏覽器可以讀出這些許可信息，并決定是否應(yīng)該下載和渲染這些字體。另外還有Typekit也是一種值得關(guān)注的方案，將字體放在第三方服務(wù)器上供調(diào)用。這些方案的優(yōu)缺點，將會在以后做詳細的介紹。
