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">
自己试试 »
打造网络！
打造网络！
