Web Font 的使用

隨著雲端的越來越普及,許多字體的使用也逐漸躍上雲端,「Google Fonts」是我很喜歡使用的一個雲端字體工具,最主要是因為完全免費,加上 Google 的空間和速度,讓許多有特色的英文字體可以在網頁上良好的展現,通常 web font 的格式不外乎就是 woff 這種格式 ( Web Open Font Format ),檔案大小會比一般的 TTF 來得小,但隨著瀏覽器的進步,也越來越多的字體使用 svg 的圖形格式,也可以做出 icon font,至於如何製作,會在另外的篇幅介紹。

參考:Google Fonts

英文字體除了 Google fonts 之外,其實也有像 Adobe Edge Web FontsFonts.com...等這些選擇,至於中文字體,也有像 iFontCloudjustfont 的服務,不過很可惜都要收費就是了,但後面會介紹如何自己製作中文的字體,不過雖然可以自己製作,但還是比較推薦使用預設的新細明體或正黑體,畢竟中文字體一組通常高達 10 MB 以上,對於網頁瀏覽的負擔實在太重了。


首先介紹 Google Fonts 的使用方式:

  1. 進入 Google Fonts 網站 : https://www.google.com/fonts
  2. 瀏覽所需要的字體。
  3. 點選選擇的字體後方 quick-use 的按鈕。

    Google Fonts

  4. 點選後進入詳細頁面,滑鼠往下拉,看到第三點,選擇@import,將這段看到的程式碼貼在 CSS 檔案的最上方,就可以載入 Web font。

    Google Fonts

  5. 接著我們只要在 HTML 裏頭,需要用到這個字體的 DOM ,加上font-family:'字體名稱',就大功告成囉!

    Google Fonts


以上就是英文字體的使用方式,基本上在 Google Fonts 都可以找到所需的字體,而且英文字體的素材和資源也較為豐富,不太需要擔心英文字體的使用,我們要擔心的反而是中文字體該如何用,以下介紹如何製作自己的中文字體。

  1. 先準備一組自己愛用的字體,例如娃娃體 ( 也可以去電腦的控制台,把「字型」資料夾打開,直接複製出來即可 )
  2. 上傳到這個網站:http://onlinefontconverter.com/,可以將字體轉換成 Web font 的格式 (woff) ,當然這個網站不僅可以轉中文,各種語言都能轉啦!
  3. 轉檔好了之後,使用以下的程式碼載入我們的字體檔 ( 請把字體檔放在你的網站空間上 ),就可以利用font-family來控制字體囉!

     @font-face {
         font-family: 字體名稱;
         src: url(字體名稱.woff);
     }  
    

    必要的時候可以在後方加上格式,避免舊版的 IE 不支援

     @font-face {
         font-family: '字體名稱';
         src: url(字體名稱.woff) format('woff');
     }
    

有興趣瞧瞧其他新文章嗎?