Google Fonts 載入教學

# Google Fonts 載入教學此幕資網站用了以下兩個字型，若您不想看以下教學，可以直複製以下程式碼 ``` css @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); @import url(https://fonts.googleapis.com/css?family=Baloo+Tamma+2:600,700); ``` # 如何載入 Google Fonts? ### 進入 Google Fonts 點擊以下超連結進入 Google Fonts 首頁: [Google Fonts](https://fonts.google.com/) 進入 Google Fonts 首頁後看到的畫面如下: ![](https://i.imgur.com/FQLC3Sc.jpg) ### 尋找需要的字型: 以字型 Roboto 為例: ![](https://i.imgur.com/IvhmvWV.jpg) 可在 Google Fonts 首頁中的左上方的搜尋欄位尋找需要的字型: ![](https://i.imgur.com/QbqA39W.jpg) 在下方搜尋結果中找到需要的字型: ![](https://i.imgur.com/Kr2FbLk.jpg) 之後會進到該字型的詳細頁面: ![](https://i.imgur.com/1dB0us5.jpg) ### 確認需要的字型種類 ![](https://i.imgur.com/XIo35os.jpg) 會發現需要 Bold italic、Medium italic、Black italic 這三種字型種類， ### 將需要的字型種類加進已選取的字型清單中將需要的字型加入已選取的字型清單中: 1. 確認需要的字型種類 2. 在確認需要的字型種類同一行的最右邊會有 + Select this style 按鈕可以將該種字型種類加進字型清單中 ![](https://i.imgur.com/OY2XjdE.jpg) 將需要的字型加入字體清單中後會看到網頁右方出現側邊攔(已選取的字型清單)，可在清單中確認需要的字型: ![](https://i.imgur.com/NGh6c5W.jpg) 如果點擊 + Select this style 按鈕(超連結)後如果沒有出現右方側邊欄的字體清單的話可以點擊畫面裡右上方的圖標來開啟已選取的字型清單: ![](https://i.imgur.com/0qcX2a3.jpg) ### 在 HTML 中將 Google Fonts 的雲端字型檔載入接著就準備將 Google Fonts 雲端字型檔載入到網頁中了，先在已選取的字型清單中切換到 Embed 頁籤，點擊 Embed 頁籤可以進行內容切換: ![](https://i.imgur.com/ldYueIU.jpg) 以下有兩種方式可以將 Google Fonts 雲端字型檔載入網頁中，選擇其中一個就可以了， #### 方法一在 HTML head 標籤中使用 link 載入預設情況下會出現以下 link 標籤，將 link 標籤整個複製起來， ![](https://i.imgur.com/op7deU1.jpg) 再將 link 標籤貼到 HTML 的 head 標籤裡來載入 Google Fonts 雲端字體: ![](https://i.imgur.com/D7Wg1Yd.jpg) ```htmlembedded= <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500;1,700;1,900&display=swap" rel="stylesheet"> </head> ``` 再回到剛才的 Google Fonts 網頁中的已選取的字型清單中複製字型樣式: ![](https://i.imgur.com/GBotDKG.jpg) 如果網頁中的字型都要設置為相同的字型的話，可直接在 body 元素選擇器中設定字型樣式: ![](https://i.imgur.com/6wvA4Cr.jpg) ```css body { font-family: 'Roboto', sans-serif; } ``` [參考範例](https://codepen.io/yingming25/pen/mdeObrR) 如果要針對同一個標籤設定相同字型的話，可透過該標籤的元素選取器來設定: ![](https://i.imgur.com/aTKbDas.jpg) ```css h2 { font-family: 'Roboto', sans-serif; } ``` [參考範例](https://codepen.io/yingming25/pen/LYpRwdv) 如果不想把同一個標籤都設為相同字型，只想在某個元素上設定字型的話，可以透過 class 選取器來設定: ![](https://i.imgur.com/QBxmRmq.jpg) ```css .header-title { font-family: 'Roboto', sans-serif; } ``` [參考範例](https://codepen.io/yingming25/pen/LYpRwLq) 以上的 CopePen 範例都有事先在 CodePen 中的 HTML 右上角的齒輪設定裡的 head 區塊透過 link 標籤載入 Google Fonts 雲端字型檔: ![](https://i.imgur.com/UZHcVdq.jpg) 再把複製起來的 Google Fonts 雲端字型檔的 link 標籤加進 head 區塊中: ![](https://i.imgur.com/PqupnM5.jpg) 加入完後記得儲存: ![](https://i.imgur.com/mUkGyeA.jpg) #### 方法二在 CSS 檔案中 @import Google fonts 雲端字型檔: 在 Google Fonts 的已選取的字型清單中的 Embed 頁籤中也可以透過 @import 的方式載入 Google fonts 雲端字型檔到 CSS 中，首先在 Embed 頁籤中點擊 link 旁的 @import: ![](https://i.imgur.com/Pas0bN6.jpg) 將下方的 style 標籤複製起來: ![](https://i.imgur.com/9e7nXuW.jpg) 在 HTML 檔的 head 標籤中加入 style 標籤: ![](https://i.imgur.com/eolXPFR.jpg) ```htmlembedded= <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500;1,700;1,900&display=swap'); </style> </head> ``` 如果是獨立的 CSS 檔案要使用這種方式的話需要把 @import 的字型檔加在所有其他選擇器設定樣式之前: ![](https://i.imgur.com/rHsWaou.jpg) ### 調整字體寬度 ![](https://i.imgur.com/wHBWYuX.jpg) 注意在 Google Fonts 已選取的字型清單中在 Medium、Bold、Black 旁邊都有數字: ![](https://i.imgur.com/kJEOBSH.jpg) Medium、Bold、Black 三種不同的字體寬度旁邊都有對應的 font-weight 數值，再依據字體寬度來設定到想要設定的元素上，可參考以下範例: [參考範例](https://codepen.io/yingming25/pen/pojNoLg?editors=1100) ### 調整字體樣式預設情況下字體的樣式都是被設置為 `font-style: normal;` 的，如果要將文字設為斜體可以將 font-style 設置為 `font-style: italic;` 來讓文字變成斜體，可參考以下範例: [參考範例](https://codepen.io/yingming25/pen/JjYEMYM?editors=1100)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.