將Google Fonts免費雲端字庫如何套用至網頁中

身為設計師或美編無論是網頁、APP應用程式或是文件等等,都會遭遇到一個很討厭的議題「字型」,不管自己電腦中下載多少字型,只要丟到網路上或者是在別的裝置開啟,都有可能因為瀏覽者的裝置沒有安裝下載而無法正常顯示。


但是雲端網路越來越發達,現在有了雲端字庫服務,只要連上網就能顯示作者設定的字體,而不會因為瀏覽者沒有安裝而無法正常顯。雲端字庫服務有付費的也有免費的,而我們偉大的Google就提供大量的免費字體讓使用者直接使用。接下來將說明為如何將Google Fonts免費雲端字庫中的字體套用至網頁中。

首先進入Google Fonts網站<可以參考這篇文章>,挑選想要安裝的字體。

取得和字型有關的CSS與設定檔。
STANDARD

@IMPORT

以下為語法範例:
語法頁面上會有兩種不同的寫法,STANDARD與@IMPORT。
但兩種都是將上半部的語法複製下來後,直接貼上HTML中<head>之標籤內。
STANDARD

@IMPORT

兩種的寫法中的CSS樣式都是複製下半部的語法。

<h1>的內容。

預覽:


(由於是套用英文字型,所以中文字型是預設。)

同時套用中文與英文字型,這邊所使用的中文字型為圓體。

CSS樣式,中文在前、英文在後。

預覽:

TOP