CSS3 ??
CSS3 Fonts
CSS3 @font-face Rules
?? ??? CSS3??? ? ????? ???? ???? ?? ??? ??? ???? ????.
CSS3? ???? ? ????? ??? ??? ??? ? ????.
????? ?? ??? ??? ? ????? ?? ??? ????? ?? ??? ????? ???? ???????.
??? ??? @font-face ??? ???? ??? CSS3 ??? ???? ????.
"???" ??? CSS3 @font-face ??? ???? ????.
??? ?? ??
??? @font-face ????? ?? ?? ??(?: myFirstFont)? ??? ?? ?? ??? ???? ???.
?: URL? ??? ??? ?????. ???? IE?? ??? ?? ??? ????.
HTML ??? ??? ???? ?? ?? ?? ?? ??? ?? ?? ??(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)站終于可以使用字體以外的預(yù)先選擇“合法”字體
</div>
</body>
</html>?? ??? ??
?? ???? ??? ? ?? @font-face ??? ???? ???.
<!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.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,網(wǎng)站終于可以使用字體以外的預(yù)先選擇“合法”字體。
</div>
<p><b>注意:</b> Internet Explorer 8以及更早版本的瀏覽器 @font-face rule.</p>
</body>
</html>?? "Sansation_Bold.ttf"? Sansation ?? Bold ??? ??? ? ?? ?? ?????.
? ???? "myFirstFont" ?? ??? ???? ????? ?? ???? ?? ???? ???.
??? ?? ??? ??? ?? ?? @font-face ??? ?? ? ????.
CSS3 ?? ??
?? ??? ?? ?? ??? ??? @font-face ?? ??? ???? ????.
?? ??
| ?????. ??? ??? ?????. | src | |
|---|---|---|
| URL | ?????. ?? ??? URL? ?????. | ??-???? |
| normal | ?? | ??????? |
| expanded |
| oblique|
| 100200 | |
| 400 |
| |
