目录

W3.CSS 谷歌字体

❮ 上一节下一节 ❯

使用 W3.CSS 添加新字体非常容易。

非常易于使用（仅 CSS 和 HTML）
无限制使用外部字体库（如 Google Fonts）
适用于所有现代浏览器

这是罗博托

这是索菲亚

索菲亚着火了

制作网络！

制作网络！

制作网络！

制作网络！

制作网络！

使用谷歌字体

Google Fonts 可免费使用，有超过 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;
}

在您的网页中，使用字体类：

示例

<p class="w3-sofia">Making the Web!</p>

亲自试一试»

制作网络！

示例

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

.w3-tangerine {
font-family: 'Tangerine', serif;
}

<p class="w3-tangerine">Making the Web Beautiful!</p>

亲自试一试»

制作网络！

示例

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster">

亲自试一试»

制作网络！

示例

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Lobster&effect=shadow-multiple">

亲自试一试»

制作网络！

示例

<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Allerta+Stencil">

亲自试一试»

制作网络！

❮ 上一节下一节 ❯