CSS Fonts @font-face

Posted on Edited on In Views: Disqus:

 

在寫網頁時，除了使用預設字體外，還可利用宣告@font-face來使用自訂字型，

已知主要字型的種類由舊到新有TTF、OTF、WOFF、SVG Fonts類型，

另外還有舊版IE專用的EOT類型。

@font-face範例如下

<!DOCTYPE html>
<html>
<head>
    <style>

@font-face {
   font-family: myFirstFont;
   src: url(http://www.w3schools.com/css/sansation_light.woff);
}

@font-face {
   font-family: myFirstFont;
   src: url(http://www.w3schools.com/css/sansation_bold.woff);
   font-weight: bold;
}

div {
   font-family: myFirstFont;
}
    </style>
</head>
<body>

    <div>
        With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
    </div>

    <p><b>Note:</b> Internet Explorer 8 and earlier, do not support the @font-face rule.</p>

</body>
</html>

 

說明：

1、用@font-face來匯入字型檔

2、font-family：用來指定字族名稱，方便給元素套用

3、src：用來指定該字型所在的檔名路徑

4、font-weight：用來指定粗體程度值可為normal(預設值)、bold、100~900

 

參考資料：

網頁中文字型除了微軟正黑體, 還有這些好選擇！(windows)

CSS 網頁字型 @font-face 使用教學與範例

網頁字體的一些事