CSS 网络安全字体
CSS 网络安全字体
适用于 HTML 和 CSS 的最佳 Web 安全字体
下面列出了适用于 HTM L和 CSS 的最佳 Web 安全字体：
- Arial (sans-serif)
- Verdana (sans-serif)
- Helvetica (sans-serif)
- Tahoma (sans-serif)
- Trebuchet MS (sans-serif)
- Times New Roman (serif)
- Georgia (serif)
- Garamond (serif)
- Courier New (monospace)
- Brush Script MT (cursive)
注意：发布网站之前，请您始终检查字体在不同浏览器和设备上的显示效果，并始终使用后备字体！
Arial (sans-serif)
Arial 是在线和印刷媒体上使用最广泛的字体。Arial 也是 Google Docs 中的默认字体。
Arial 是最安全的网络字体之一，并且在所有主要操作系统上都可用。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, 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
Verdana (sans-serif)
Verdana 是一种非常流行的字体。 甚至 Verdana 的小字体也很容易阅读。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 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
Helvetica (sans-serif)
Helvetica 字体广受设计师喜爱。它适合多种商业类型。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 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
Tahoma (sans-serif)
Tahoma 字体的字符间距较小。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, 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
Trebuchet MS (sans-serif)
Trebuchet MS 由 Microsoft 于 1996 年设计。请谨慎使用此字体。并非所有移动操作系统都支持。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS', 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
Times New Roman (serif)
Times New Roman 是世界上最知名的字体之一。它看起来很专业，并在许多报纸和新闻网站中使用。它也是 Windows 设备和应用程序的主要字体。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman', 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
Georgia (serif)
Georgia 是一种优雅的衬线字体。它在不同的字体大小下都有很强的可读性，因此非常适合用于移动响应式设计。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!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
Garamond (serif)
Garamond 是用于许多印刷书籍的经典字体。它拥有经典的外观和良好的可读性。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!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
Courier New (monospace)
Courier New 是使用最广泛的等宽衬线字体。 Courier New 通常用于代码的显示，许多电子邮件提供商将其用作默认字体。 Courier New 还是电影剧本的标准字体。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 9
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New', 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
Brush Script MT (cursive)
Brush Script MT 字体旨在模仿笔迹。它优雅精致，但可能很难阅读。请小心使用。
示例代码：
Welcome to Shanghai!
Shanghai is one of the four direct-administered municipalities of the People's Republic of China.
0 1 2 3 4 5 6 7 8 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
提示：同时，请查看所有可用的 Google 字体及其使用方法。
