W3.CSS Google 字型
使用 W3.CSS 新增新字型非常簡單。
- 使用非常簡單（僅 CSS 和 HTML）
- 無限制地使用外部字型庫（如 Google Fonts）
- 可在所有現代瀏覽器中執行
這是 Roboto
這是 Sofia
Sofia on Fire
打造網路！
打造網路！
打造網路！
打造網路！
打造網路！
使用 Google Fonts
Google Fonts 可免費使用，擁有超過 1000 種字型可供選擇。
在網頁的 head 部分，連結到 Google 字型
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
然後新增 CSS，指定在哪裡使用它
body,h1,h2,h3,h4,h5,h6 {font-family: Roboto, sans-serif;}
自己試試 »
另一個示例
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
body,h1,h2,h3,h4,h5,h6 {font-family: Sofia, serif;}
自己試試 »
建立字型類
在網頁的 head 部分，連結到 Google 字型
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
然後建立一個字型類
示例
.w3-sofia {
font-family: Sofia, cursive;
}
在你的網頁中，使用字型類
打造網路！
示例
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
.w3-tangerine {
font-family: 'Tangerine', serif;
}
<p class="w3-tangerine">讓網路變得美麗！</p>
自己試試 »
打造網路！
打造網路！
示例
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">
自己試試 »
打造網路！
打造網路！
