CSS 教學:Google Fonts 免費雲端字體-實作篇

大家好,上次已經有稍微介紹過「 Google Fonts 」這個雲端字體了,如果上次沒有 follow 到的新同學,請到這裡觀看文章。

這次的教學分享,小編會利用一個簡單的網頁版型來作示範,實際教大家如何將雲端上面的字體套用到自己的網頁裡。

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - okok

不論是「 Google Fonts 」或是 CSS 語法的初學者,都別錯過這次練習的好機會喔。  ^_^


1. 新建 HTML 網頁

第一步,當然還是從建立一個 HTML 基本架構開始,請大家直接參考下方圖示。

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 01


2. 附加 CSS 外部樣式表

接著,新建一個 CSS 檔案(在此次範例中,小編將檔案命名為 flycan.css ),並附加到 HTML 中。

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 03

回到 CSS 樣式表中,我們先來做個基本的語法複習:

在不久前的教學文分享中,有一篇【固定背景圖之語法練習】,不知道大家是否還記得?

這次的範例,小編只是換了一張長形的背景圖片,並且將它固定在網頁的左上方;至於其他設定,基本上都和那一篇教學相同,請大家先參考下方圖示之說明,如果還有不熟的地方,就請再重新複習一次之前的教學文吧!

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 04

完成之後的版型預覽如下:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 05


3. Google Fonts 雲端字體

在上次【Google Fonts 免費雲端字庫-導覽篇】分享文中,

小編已經有教大家怎麼搜尋自己想要使用的雲端字體,

這次要正式套用到網頁上囉!

請大家先到「 Google Fonts 」網站中,找到任一字體備用;(小編用的是上次教學文中示範的”Paytone One”字體)

首先,大家會在該字體的語法頁面上,找到兩種稍有不同的寫法;

第一種是利用 link :

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 06

第二種是利用 @import :

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 07

兩種方式都是將上半部的語法複製下來後,直接貼上 HTML 中的 <head> 標籤內,如下面兩張圖示:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 08

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 09


至於在 CSS 樣式表中設定字體的部分,則是一樣的寫法:

(因為找到的是英文字體,所以小編先用< h1 >的純英文標題作示範)

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 10

完成之後,< h1 >標題就成功套用為” Paytone One “字體囉~

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 11-1

 

請大家先將上面兩種方式的 HTML 網頁,以及 CSS 樣式表都儲存下來,稍後的範例中將會繼續沿用喔!


※【補充說明】使用「 link 」跟「 @import 」兩者之間的差異?

雖然結果看似相同,不過上述兩種寫法其實還是有實質上的差異喔!大致上可分成3點:

A.「 link 」是 XHTML 標籤,無兼容問題;「 @import 」則是 CSS 的範疇,只能載入 CSS ,且可能會產生瀏覽器(低版本)不支援的問題。

B. 用「 link 」呼叫 CSS 時,在頁面載入時同步加載;「 @import 」需先載入網頁再加載 CSS 。

C.「 link 」支持利用 JS 控制 DOM 去改變樣式;「 @import 」則不支持。

以上幾點,提供給大家做個參考。


4. 同時套用多種中/英文字體之方式?

由於「 Google Fonts 」網站中只有提供英文字體,如果網頁上面同時想要套用好幾種不同的中、英文字體時,該怎麼辦呢?

還記得上次分享文中,我們有提到另外一個早鳥測試版網址:「 Google Fonts: Early Access 」吧?!這裡就可以找到中文的雲端字體喔,例如:「思源黑體」( “Noto Snas TC” )(如圖示)。

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 12

跟「 Google Fonts 」的英文字體們不同的是,在早鳥測試版網頁中,所能找到的就只有「 @import 」這一種從雲端載入 CSS 的方式;稍後,小編會整理好3種不同的雲端字體載入寫法,教大家如何一併套用4種中/英文字體。

現在,要請大家先找好自己想要使用的字體語法做備用。

如果有人想跟小編做出完全相同的範例,中文字體除了「思源黑體」以外,也請將「cwTeXHei (Chinese-traditional)」的”仿宋體”語法準備好。

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 13

至於英文字體,則可以再多找一個備用(小編將使用的是「 Google Fonts 」中的 “Slabo 27px” )。


5. 方案A – 同時在 HTML 網頁中使用「@import」

現在,請開啟在【步驟三】中儲存的兩種 HTML 網頁,由於中文雲端字體只有提供「 @import 」這個語法,所以我們先來試試,如果4種字體同時使用「 @import 」方式,是否可行呢?

除了原本已經儲存的 “Paytone One” 字體外,將另外3種字體的來源語法,也直接複製並貼上 HTML 的 <head>中,如下圖:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 14A_1

大家會發現,下面兩行中文字體的網址跟英文字體的有所不同(實際測試之後,也發現會發生載入失敗的情況),所以請將它們修正之後,正確寫法如下圖:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 14A-2

將 HTML 部分完成之後,請開啟「 flycan.css 」樣式表,這邊除了要套用個別的字體語法、設定文字大小之外,我們也順便利用 padding 將版型做了調整:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 14A-3

最後,完成的網頁如下圖,不但有成功套用了4種不同的雲端字體,並且標題與段落較為分明,看起來真的比較美觀呢!

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - okok-1


6. 方案B – 「 Google Fonts 」的字體可用「 STANDARD 」方式

大家還記得在【步驟三】中,「 Google Fonts 」的字體網頁上,除了 「 @import 」之外,還有另外一個「 STNDARD 」語法嗎?

那我們在這個步驟中,就來試試看如果在 HTML 中,同時使用兩種寫法,是否也可行呢?

請大家直接參照下方的圖示說明:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 14B-2

至於「 flycan.css 」樣式表的語法,則與方案A完全相同,不需要更動喔。

最後,瀏覽網頁的結果,其實也是可以成功套用的!


7. 方案C – 將語法一律寫在外部樣式表內

最後要教大家的第3種方法,請大家先回到在【步驟五】中完成的 HTML 網頁,

同樣是利用 「@import 」寫法,但這次我們卻直接寫在「 flycan.css 」樣式表中:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 14C-1

複製 + 貼上到「 flycan.css 」之後,如下圖:

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - 14C-2-1

當然,最後也是可以成功的套用雲端字體喔!

CSS 教學 - 網頁排版 Free Resource 好康報報 Good Design 好站報報  - CSS 教學:Google Fonts 免費雲端字體-實作篇 - okok-2

以上就是這一次的實作範例教學,希望大家都有順利完成~


最後,再補充一點小編個人的心得:

這3種方案相較之下,建議選用的優先順序,應該會是方案 C > 方案 A > 方案 B;

一來,是因為當套入的字體種類越多時,選擇使用同一種寫法,較不易出錯,

再者,將 CSS 語法一併寫在外部樣式表中,其實也比較方便日後的版型修改以及管理。

小小淺見提供給同學們參考~

謝謝大家這次的參與,下次教學文再見囉!

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

posted in CSS 教學 - 網頁排版, Free Resource 好康報報, Good Design 好站報報 and tagged , , , , , , .

留言功能已關閉。