W3.CSS 谷歌字体
使用 W3.CSS 添加新字体非常容易。
- 非常易于使用（只需 CSS 和 HTML）
- 可以无限制使用外部字体库（如 Google 字体）
- 适用于所有现代浏览器
这是 Roboto 字体
这是 Sofia 字体
Sofia 字体 on Fire
制作网页！
制作网页！
制作网页！
制作网页！
制作网页！
使用 Google 字体
Google 字体免费使用，有超过 1000 种字体可供选择。
在网页的头部链接到 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;}
尝试一下 »
创建字体类
在网页的头部链接到 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">
尝试一下 »
制作网页！
制作网页！
