CSS 字体回退 详解
CSS 字体回退
常用的后备字体
以下是按 5 个通用字体系列组织的一些常用字体后备：
- Serif
- Sans-serif
- Monospace
- Cursive
- Fantasy
Serif 字体
| 字体系列 | 示例文本 | 代码 |
|---|---|---|
| "Times New Roman", Times, serif |
This is a Heading This is a paragraph. |
试一试 |
| Georgia, serif |
This is a Heading This is a paragraph. |
试一试 |
| Garamond, serif |
This is a Heading This is a paragraph. |
试一试 |
Sans-Serif 字体
| 字体系列 | 示例文本 | 代码 |
|---|---|---|
| Arial, Helvetica, sans-serif |
This is a Heading This is a paragraph. |
试一试 |
| Tahoma, Verdana, sans-serif |
This is a Heading This is a paragraph. |
试一试 |
| "Trebuchet MS", Helvetica, sans-serif |
This is a Heading This is a paragraph. |
试一试 |
| Georgia, Verdana, sans-serif |
This is a Heading This is a paragraph. |
试一试 |
Monospace 字体
| 字体系列 | 示例文本 | 代码 |
|---|---|---|
| "Courier New", Courier, monospace |
This is a Heading This is a paragraph. |
试一试 |
Cursive 字体
| 字体系列 | 示例文本 | 代码 |
|---|---|---|
| "Brush Script MT", cursive |
This is a Heading This is a paragraph. |
试一试 |
Fantasy 字体
| 字体系列 | 示例文本 | 代码 |
|---|---|---|
| Copperplate, Papyrus, fantasy |
This is a Heading This is a paragraph. |
试一试 |
提示：同时，请查看所有可用的 Google 字体及其使用方法。
完整实例1：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Times New Roman", Times, serif;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例2：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例3：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例4：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例5：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例6：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例7：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例8：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例9：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Brush Script MT", cursive;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
完整实例10：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Copperplate, Papyrus, fantasy;
}
</style>
</head>
<body>
<h1>Welcome to Shanghai!</h1>
<p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
