手册
目录
如果你不想使用 HTML 中的任何标准字体,你可以使用 Google Fonts。
Google Fonts 可以免费使用,提供超过 1000 种字体供你选择。
只需要在 <head> 部分添加一个特殊的样式表链接,然后在 CSS 中引用该字体即可。
这里我们想使用名为 "Sofia" 的字体:
<head><br></br><strong><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia"></strong><br></br><style><br></br>body {<br></br>
font-family: "Sofia", sans-serif;<br></br>}<br></br></style><br></br></head><br></br>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
Lorem ipsum dolor sit amet.
123456790
这里我们想使用名为 "Trirong" 的字体:
<head><br></br><strong><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong"></strong><br></br><style><br></br>body {<br></br>
font-family: "Trirong", serif;<br></br>}<br></br></style><br></br></head><br></br>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
Lorem ipsum dolor sit amet.
123456790
这里我们想使用名为 "Audiowide" 的字体:
<head><br></br><strong><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide"></strong><br></br><style><br></br>body {<br></br>
font-family: "Audiowide", sans-serif;<br></br>}<br></br></style><br></br></head>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
Lorem ipsum dolor sit amet.
123456790
注意: 在 CSS 中指定字体时,始终至少列出一个备用字体(以避免意外行为)。因此,你也应该在列表末尾添加一个通用字体系列(如 serif 或 sans-serif)。
如需查看所有可用的 Google Fonts,请访问我们的《如何使用 Google Fonts》教程。
要使用多个 Google 字体,只需使用竖线字符(|)分隔字体名称,如下所示:
请求多个字体:
<head><br></br><strong><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong"></strong><br></br><style><br></br>
h1.a {font-family: "Audiowide", sans-serif;}<br></br>h1.b {font-family: "Sofia",
sans-serif;}<br></br>h1.c {font-family: "Trirong", serif;}<br></br></style><br></br></head><br></br>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
注意: 请求多个字体可能会减慢网页加载速度!因此请谨慎使用。
当然,你可以随意使用 CSS 来样式化 Google Fonts!
样式化 "Sofia" 字体:
<head><br></br><strong><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia"></strong><br></br><style><br></br>body {<br></br>
font-family: "Sofia", sans-serif;<br></br> font-size: 30px;<br></br>
text-shadow: 3px 3px 3px #ababab;<br></br>}<br></br></style><br></br></head><br></br>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
Lorem ipsum dolor sit amet.
123456790
Google 还提供了一些可以使用的字体效果。
首先在 Google API 中添加 effect=<em>效果名称</em>,然后为使用特殊效果的元素添加一个特殊的类名。类名始终以 font-effect- 开头,后接 <em>效果名称</em>。
为 "Sofia" 字体添加火焰效果:
<head><br></br><strong><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire"></strong><br></br><style><br></br>body {<br></br>
font-family: "Sofia", sans-serif;<br></br> font-size: 30px;<br></br>}<br></br></style><br></br></head><br></br>
<body><br></br><br></br><h1 class="font-effect-fire">燃烧的 Sofia</h1><br></br><br></br></body><br></br>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
如果需要请求多个字体效果,只需使用竖线字符(|)分隔效果名称,如下所示:
为 "Sofia" 字体添加多个效果:
<head><br></br><strong><link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple"></strong><br></br><style><br></br>body {<br></br>
font-family: "Sofia", sans-serif;<br></br> font-size: 30px;<br></br>}<br></br></style><br></br></head><br></br>
<body><br></br><br></br><h1 class="font-effect-neon">霓虹效果</h1><br></br><h1 class="font-effect-outline">轮廓效果</h1><br></br><h1 class="font-effect-emboss">浮雕效果</h1><br></br><h1 class="font-effect-shadow-multiple">多重阴影效果</h1><br></br><br></br></body><br></br>
运行实例 »点击 "运行实例" 按钮查看在线实例
结果:
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.3万人学习
共49课时
77.9万人学习
共29课时
62.3万人学习
共25课时
39.7万人学习
共43课时
73.6万人学习
共25课时
62.2万人学习
共22课时
23.2万人学习
共28课时
34.4万人学习
共89课时
127万人学习