@face-font呼叫伺服器字型
阿新 • • 發佈:2019-01-25
<!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一樣的話,就可變成相應的字型,如果有其它語言的基礎的話就可以明白,這類似方法的過載。