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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </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>
  11. <h1>Welcome to Shanghai!</h1>
  12. <p>Shanghai is one of the four direct-administered municipalities of the People's Republic of China. Welcome to Shanghai!</p>
  13. <p>0 1 2 3 4 5 6 7 8 9</p>
  14. </body>
  15. </html>

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

分类导航