熱情輕鬆地過生活: 設定HTML在瀏覽器上所呈現的字體

2013年9月25日星期三

設定HTML在瀏覽器上所呈現的字體

若我們想在網頁上使用不同的字體，通常會設定font-family來達成效果，
但若Client端(一般使用者)沒有我們所設定的字體的話就看不到效果了，

因此我們可以把字體放在Server端，如此一來，就算Client端沒有字體也可以從Server端下載字體並且正確顯示出來，如下段程式碼:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
@font-face {
font-family: test;
src: url("test.ttf") format("TrueType");
}
</style>
</head>
<body>
<div style="font-family:test;font-size:36px">Font Style Demo</div>
</body>
</html>

至於字體部分可以自己去網路下載，執行結果如下:

沒有留言:

張貼留言

訂閱：張貼留言 (Atom)