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

image

在中文網頁內容的設計上,最不方便的地方應該就屬中文字型的部份了,預設的情形下,主要只能顯示「新細明體」與「標楷體」!若要使用其他的字型,最常見的方式,就是將文字轉換為圖形檔案!當然,如果只考慮 Windows 的使用者,也可以使用「微軟正黑體」,或是「SimHei」這兩種 Windows 已內建的字型!

其實對於網頁上中文字型的解決方案,已有一些業者投入,如「華康威Font」、「justfont」,讓網頁的中文字體就像一般在個人電腦中使用 Office 等軟體一般,可以套用比較多的中文字型!只是,目前要達到這樣效果,在費用上是相對比較高,需額外租用中文字型的服務,對於多數的網頁建置業者來說,負擔蠻重的,因此,目前的使用率還不是非常高!

image

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

 

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

image

 

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

 

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

https://fonts.google.com/earlyaccess

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

image

註:中間 Link 引用的部份,上述 url 網址語法有少了 http : 網址,需要修正為

@import url(http://fonts.googleapis.com/earlyaccess/cwtexhei.css);

 

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

image

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

<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';"

image

以下是在網頁中預覽的畫面,有指定 Google Fonts 黑體的標題已經正確顯示了!

第一次使用時,因為需要自 Google 網頁下載字型,需要一些時間,因此有可能一開始會先看到「新細明體」,待字型下載完成後,就自動切換成黑體字!

image

張貼留言

這個網誌中的熱門文章

原來Google雲端硬碟也能開放「匿名上傳」,做為學生作業、比賽稿件上傳就不用再傷腦筋了!(Google Apps Script應用服務指令碼)

OnlineVideoConverter 雲端影片擷取服務,讓您不只下載 youtube 影片,更能直接下載指定範圍的影片內容,幫您省下影片下載後再剪輯轉檔的時間!(也有瀏覽器擴充工具,讓使用率較高的人更方便!)

「Google 語音輸入法」、「訊飛中文語音輸入法」APP ,讓智慧型裝置也能輕鬆「離線」進行語音輸入!