1. 程式人生 > >@face-font呼叫伺服器字型

@face-font呼叫伺服器字型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伺服器字型</title>
    <style>
/*  呼叫伺服器字型,自定義font-family,然後再利用src屬性的url方法呼叫檔案*/
        @font-face{
            src:url("AC_Filmstrip.otf");
            font-family: webfont;
        }
        @font-face
{ src:url("segmdl2.ttf"); font-style: italic; font-family: webfont; } @font-face{ src:url("seguisym.ttf"); font-style: bold; font-family: webfont; } p{ font-family: "webfont"; }
p.test1{ font-style: italic; font-family: "webfont"; } p.test2{ font-style: bold; font-family: "webfont"; }
</style> </head> <body> <p>hello world</p> <p class="test1">hello world</p
>
<p class="test2">hello world</p> </body> </html>

可以用@face-font呼叫伺服器的字型,語法如下:
@face-font{
src:url(字型檔案的url路徑);
font-family:自定義字型;
font-style:預設(不填)| italic | bold;
}
從上面的程式碼可以看出,用@face-font設定了字型檔案以後,
p元素就可以使用伺服器中的字型了,font-style這個屬性如果設定不同的值。在呼叫自定義字型時,如果元素的font-style屬性的值跟@face-style中的font-style一樣的話,就可變成相應的字型,如果有其它語言的基礎的話就可以明白,這類似方法的過載。