[CSS學習筆記] font-family 的使用方法

2018/02/09 CSS

前言

這陣子公司網站在處理官網字體的問題,雖然內嵌字體方便但好流量也很耗載入時間,這篇文章教你如何使用 Google 所免費提供的思源體以及教你如何使用 woff 檔內嵌字體在專案中。

Google Fonts 雲端字體

Google Fonts 提供非常多免費字體。首先開啟你的 CSS 檔引入 Google 所提供的思源黑體,之後再使用 font-family 將字體套用上,使用雲端字體就是這麼簡單。

  • CSS
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{
  font-family: 'Noto Sans TC', sans-serif;
}

專案中內嵌字體

首先到這個網站中將你喜歡的字體 .tff 之類的檔案丟上去轉檔成 Web font 的格式 (woff),轉檔後就將它下載解壓縮然後丟入你的專案資料夾當中吧,我這邊示範的字體是華康秀風體,轉檔後會變成如下圖的格式:

成功將自己的字體轉成 woff 格式後就可以把他放到我們自己的專案資料夾當中囉,最後一個步驟就是在 CSS 檔案中引入他並去且套用字體,作法跟雲端字體一模一樣。

  • CSS
 @font-face {
     font-family: 'DFHsiu-W3-WIN-BF';
     src: url(DFHsiu-W3-WIN-BF.woff) format('woff');
 }
 body{
   font-family: 'DFHsiu-W3-WIN-BF';
 }

成果如下:

Search

    Table of Contents