使用CSS3的 @font-face 顯示自定義字體

    之前我們要是想使用漂亮的字體只能使用圖片字體圖片,即製作過程偏慢,用戶體驗也不夠好,對於計算機的加在也是一種負荷,現在css3爲我們提供了新的自定義字體屬性: @font-face,不但使用簡單,而且幾乎能解決了我們之前的所有問題。
    先上代碼:<!DOCTYPE html>
<head>
<meta charset=utf-8" />
<title>css3自定義字體</title>
<style type="text/css">
@font-face{
font-family:myFont;
src:url('The Heart of Everything Demo.ttf'),url('Sansation_Light.eto');
}
@font-face{
font-family:myFont;
src:url('The Heart of Everything Demo.ttf'),url('Sansation_Bold.eot');
}
div{font-family:myFont;}
</style>
</head>
<body>
<div>百度一下,beautiful你就知道。myFont百度一下,你就知道。how are you!</div>
</body>
</html>

上面就是引用的基本方法,當然我們爲了更好地兼容不同版本的瀏覽器我們可以再加一些兼容寫法,這裏就不重複了。現在我們就需要下載字體了,個人比較推薦http://www.dafont.com/theme.php?cat=101  一個免費的字體網站,我們可以直接下載我們想要的字體,在上面的url路徑裏面選擇任何我們想要的一款字體的名稱就好了,希望對大家有幫助。

下面是我們的瀏覽效果:

wKiom1eFskfT3r--AABHmmfsUDg083.png-wh_50

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章