網頁設計 FAQ 常見問題開講:如何在網頁中使用 Google Fonts 五款免費雲端字型 (黑體, 仿宋, 明體, 楷體, 圓體)?



在中文網頁內容的設計上,最不方便的地方應該就屬中文字型的部份了,預設的情形下,主要只能顯示「新細明體」與「標楷體」!若要使用其他的字型,最常見的方式,就是將文字轉換為圖形檔案!當然,如果只考慮 Windows 的使用者,也可以使用「微軟正黑體」,或是「SimHei」這兩種 Windows 已內建的字型!
其實對於網頁上中文字型的解決方案,已有一些業者投入,如「華康威Font」、「justfont」,讓網頁的中文字體就像一般在個人電腦中使用 Office 等軟體一般,可以套用比較多的中文字型!只是,目前要達到這樣效果,在費用上是相對比較高,需額外租用中文字型的服務,對於多數的網頁建置業者來說,負擔蠻重的,因此,目前的使用率還不是非常高!

↑ 以上是華康威 font 網頁上提供的模擬功能,只要輸入網址,就能將網頁標題與內文替換成指定的字型!

除了付費方案外,是否還有免費的選擇呢?有的,Google Fonts 有推出五款網路專用的免費字型,包括黑體、仿宋、明體、楷體及圓體,網頁中文字型呈現上又多了好幾種不同的選擇,且不論是電腦版或是行動裝置版本都適用喔!


現在就來看看怎麼樣在網頁中引用 Google Fonts 的中文字型!

一、先決定要使用的 Google Fonts  字型

https://fonts.google.com/earlyaccess
進入 Google Fonts 上述網址後,可以看到如下圖的字體介紹、CSS 引用連結、與如何套用至網頁文字的 CSS 語法…等。

註:中間 Link 引用的部份,上述 url 網址語法有少了 http : 網址,需要修正為
@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);

二、開啟你的網頁,導入 Google Fonts  指定字型


一般沒有加密的網站或部落格:

<style type="text/css">
   @import url("http://fonts.googleapis.com/earlyaccess/cwtexhei.css");
</style>

有使用 SSL 加密的網站或是部落格:

<style type="text/css">
   @import url("https://fonts.googleapis.com/earlyaccess/cwtexhei.css");
</style>


只要在網頁的 <head> 與 </head> 標籤間加入上述的語法,就能將 Google Fonts 字型導入網頁中!

三、套用 Google Fonts 至指定的文字標題或是段落上

上述動作完成後,我們就可以將這些特殊字型套用至指定的文字標題或是段落上!
如果您對於 CSS 比較熟悉的話,也可以先定義好自訂樣式後,再套用至多個文字標題或是其他頁面中,來做 CSS 樣式的統一管理!

style="font-family: 'cwTeXHei';"


以下是在網頁中預覽的畫面,有指定 Google Fonts 黑體的標題已經正確顯示了!
第一次使用時,因為需要自 Google 網頁下載字型,需要一些時間,因此有可能一開始會先看到「新細明體」,待字型下載完成後,就自動切換成黑體字!


留言

這個網誌中的熱門文章

免費影片剪輯「威力導演 365 基礎版」,不用輸入序號,只要註冊會員即可下載使用!

全民學 3D 就從 Blender 3D 開始:Blender 3D 中文化設定、認識視窗介面與學習資源

剪映好用的字幕「簡體轉繁體」工具在這裏,別再找錯了!

ZoomIt 螢幕畫筆推出 8.0 版,繼續榮登電腦教學最佳「隱形」助手!

教學百寶箱:Sizer 幫您記住視窗大小與位置,以後不用每次都辛苦慢慢拖拉滑鼠調整!