参考手册
CSS 字体
CSS 字体属性
CSS 字体回退
返回 CSS 字体

CSS 网络安全字体

什么是 网页安全字体？

网页安全字体（Web Safe Fonts），是在所有浏览器和设备上普遍安装的字体。

回退字体

但是，没有100%完全安全的字体。总是有可能找不到字体或字体安装不正确的时候。

因此，始终使用回退字体是非常重要的。

这意味着您应该在 font family 属性中添加一个类似“备用字体”的列表。如果第一种字体不起作用，浏览器将尝试下一种，然后再尝试下一种，依此类推。始终以通用字体系列名称结束列表。

下一章，我们会更详细的讲解 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 是最安全的网络字体之一，并且在所有主要操作系统上都可用：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: Arial, sans-serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Verdana (sans-serif)

Verdana 是一种非常流行的字体。 甚至 Verdana 的小字体也很容易阅读：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: Verdana, sans-serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Helvetica (sans-serif)

Helvetica 字体广受设计师喜爱。它适合多种商业类型：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: Helvetica, sans-serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Tahoma (sans-serif)

Tahoma 字体的字符间距较小：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: Tahoma, sans-serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Trebuchet MS (sans-serif)

Trebuchet MS 由 Microsoft 于 1996 年设计。请谨慎使用此字体。并非所有移动操作系统都支持：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: 'Trebuchet MS', sans-serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Times New Roman (serif)

Times New Roman 是世界上最知名的字体之一。它看起来很专业，并在许多报纸和新闻网站中使用。它也是 Windows 设备和应用程序的主要字体：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: 'Times New Roman', serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Georgia (serif)

Georgia 是一种优雅的衬线字体。它在不同的字体大小下都有很强的可读性，因此非常适合用于移动响应式设计：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: Georgia, serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Garamond (serif)

Garamond 是用于许多印刷书籍的经典字体。它拥有经典的外观和良好的可读性：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: Garamond, serif;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Courier New (monospace)

Courier New 是使用最广泛的等宽衬线字体。 Courier New 通常用于代码的显示，许多电子邮件提供商将其用作默认字体。

Courier New 还是电影剧本的标准字体：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: 'Courier New', monospace;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

Brush Script MT (cursive)

Brush Script MT 字体旨在模仿笔迹。它优雅精致，但可能很难阅读。请小心使用：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. body {
  6.   font-family: 'Brush Script MT', cursive;
  7. }
  8. </style>
  9. </head>
  10. <body>
  12. <h1>Welcome to Shanghai!</h1>
  14. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  16. <p>0 1 2 3 4 5 6 7 8 9</p>
  18. </body>
  19. </html>
运行一下

提示：同时，请查看所有可用的 完整的 Google 字体及其使用方法。

CSS 字体属性
CSS 字体回退

分类导航