在前端專案使用 Google Fonts 字體和圖示

字體

前往 Google Fonts 挑選喜歡的字體。

實作

建立 index.html 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 預連接到 Google Fonts API 以加快字體加載速度 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 引入 Google Fonts 中的 Noto Serif TC 字體系列,設置字重範圍 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+TC:[email protected]&display=swap" rel="stylesheet">
</head>
<body>
<h1>
你好,世界!
</h1>
<!-- 定義全局樣式,設置字體和其他字體屬性 -->
<style>
html {
/* 設置全局字體為 Noto Serif TC,備選字體為 serif */
font-family: "Noto Serif TC", serif;
/* 設置字體光學尺寸自動調整 */
font-optical-sizing: auto;
/* 設置全局字重為 400,即普通字重 */
font-weight: 400;
/* 設置字體樣式為正常 */
font-style: normal;
}
</style>
</body>
</html>

豆腐字體

前往 Google Fonts - Noto 挑選喜歡的豆腐字體。

實作

建立 index.html 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 預連接到 Google Fonts API 以加快字體加載速度 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- 引入 Google Fonts 中的 Noto Color Emoji 和 Noto Serif TC 字體系列 -->
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
</head>
<body>
<h1>
🥰💀✌️🌴🐢🐐🍄⚽🍻👑📸😬👀🚨🏡🕊️🏆😻🌟🧿🍀🎨🍜
</h1>
<!-- 定義全局樣式,設置字體和其他字體屬性 -->
<style>
html {
/* 設置全局字體為 Noto Color Emoji,備選字體為 sans-serif */
font-family: "Noto Color Emoji", sans-serif;
/* 設置全局字重為 400,即普通字重 */
font-weight: 400;
/* 設置字體樣式為正常 */
font-style: normal;
}
</style>
</body>
</html>

圖示

前往 Google Fonts - Icons 挑選喜歡的圖示。

實作

建立 index.html 檔。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入 Google Fonts 中的 Material Symbols Outlined 字體,允許使用變數字體屬性 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
</head>
<body>
<!-- 使用 Material Symbols Outlined 字體顯示 "home" 圖標 -->
<span class="material-symbols-outlined">
home
</span>
<!-- 定義 .material-symbols-outlined 類的樣式,設置變數字體屬性 -->
<style>
.material-symbols-outlined {
font-variation-settings:
'FILL' 0, /* 'FILL' 0 表示字體無填充,使用描邊樣式 */
'wght' 400, /* 'wght' 400 設置字體的字重為 400,即普通字重 */
'GRAD' 0, /* 'GRAD' 0 設置字體的梯度為 0,即無額外梯度效果 */
'opsz' 24; /* 'opsz' 24 設置字體的光學尺寸為 24,適合在 24px 大小下顯示 */
}
</style>
</body>
</html>