CSS 什么是网络安全字体和回退字体

网站的设计是为了让用户获得有关公司和产品以及服务的信息。任何网站都需要清晰和美观，以便读者对其作出反应。网站的排版是使其保持一致并赋予其审美外观的一个关键因素。网站的整体个性是由排版设计所构成的，这对创造品牌识别至关重要。如果你利用独特和一致的排版，用户将开始识别某种字体与你的品牌。

当你使用好的排版，你可以保持读者的兴趣，并说服他们在你的网站上停留更长时间。通过产生一个坚实的图形平衡和一个强大的视觉层次，它有助于建立网站的整体基调。此外，它还影响到如何做出决定，并对读者如何处理和解释文本的材料有重大影响。它使内容具有吸引力，从而影响网站的可读性。

谷歌为开发者推出了各种网络安全字体，可以免费下载。在这篇文章中，我们将讨论CSS为开发者提供的网络安全字体和回退字体。

什么是网络安全字体

网络安全字体是指任何设备上的所有浏览器都支持的字体。这些字体使开发者能够正确地显示它们，即使它们没有安装在用户的设备上。

在开发网络安全字体之前，如果用户的本地系统没有安装 Times New Roman字体，浏览器就会显示这种通用字体。然而，如果字体在服务器端显示不当，开发人员将无法检测到这些字体。这导致用户体验不佳。

使用网络安全字体可以解决这个问题。在网页设计过程中，如果你使用网络安全字体，你可以放心，你的字体将在每台设备上显示。

语法

element{
   font-family: font1;
}

网络安全字体的种类

有六种网络安全字体。它们是：-

Serif - 这些字体在每个字母的主体中都有小的突起。它们在屏幕和印刷品上更容易阅读。Times New Roman就是一种衬线字体。
**Monospace ** 字体 – 这些字体的字母之间有相等的空间。Space Mono、Courier、Inconsolata等都是Monospace字体。
Sans-serif – 这些字体与衬线字体相反。它们不包含小的突起。Arial、Helvetica、Futura、Calibri等都是无衬线字体的一些例子。
**Fantasy ** 字体 – 这些字体是高度风格化和装饰性的字体。Papyrus, Herculanum, Luminari是幻想字体。
MS - 这些是由微软公司推出的字体。Trebuchet MS, MS Gothic, Georgia等都是MS字体。
**Cursive ** - 这些字体类似于草书。Brush Script MT、Broadley、Monarda、Raksana等，都是一些草书字体。

例子

<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title> Web Safe Fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      h1{
         color: green;
         text-decoration: underline;
      }
      .demo1{
         font-family: Times New Roman;
      }
      .demo2{
         font-family: Arial;
      }
      .demo3{
         font-family: Courier;
      }
      .demo4{
         font-family: Brush Script MT;
      }
      .demo5{
         font-family: Trebuchet MS;
      }
      .demo6{
         font-family: fantasy;
      }
   </style>
</head>
<body>
   <center>
      <h2> Web Safe Fonts </h2>
      <div class= "demo1"> This is an example in Times New Roman font. </div>
      <div class= "demo2"> This is an example in Arial font. </div>
      <div class= "demo3"> This is an example in Courier font. </div>
      <div class= "demo4"> This is an example in Brush Script MT font. </div>
      <div class= "demo5"> This is an example in Trebuchet MS font. </div>
      <div class= "demo6"> This is an example in Fantasy font. </div>
   </center>
</body>
</html>

什么是CSS中的后备字体

CSS为网页设计提供了两种类型的字体家族。一种是通用的字体家族，如衬线字体（Times New Roman、Georgia等），另一种是单独的字体家族，如Arial、Calibri等。

通用字体有一些外观相似的字体家族，因此，如果用户的系统中没有主要的字体，就会有一个后备机制，其中包含一个可以替代使用的类似字体家族的列表。这些字体被称为 “后备字体”。它们在网页设计中被用作备份，因为没有一种网页字体是100%安全的。总是有出错的可能。

后备字体通过充当备份来解决这个问题。那些属于网络安全字体的字体系列也可以被设置为后备字体。后备字体的一些例子有：草书体、幻想体、单色体等。

语法

element{
   font-family: font1, font2, font3, font4;
}

font2, font3, font4是后备字体，作为备份使用。如果浏览器不支持字体1，那么将显示字体2。如果不支持font2，则使用font3，以此类推。

例子

<!DOCTYPE html>
<html>
<head>
   <title> Fallback fonts </title>
   <link rel= "preconnect" href= "https://fonts.googleapis.com">
   <link rel= "preconnect" href= "https://fonts.gstatic.com">
   <link href= "https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel= "stylesheet">
   <style>
      .demo1{
         font-family: verdana,'cursive';
      }
      .demo2{
         font-family: cursive, Cochin, Georgia;
      }
      .demo3{
         font-family: Helvetica, arial, cursive, 'Times New Roman';
      }
      .demo4{
         font-family: 'Times New Roman', Cambria, Cochin, Georgia, Times, serif;
      }
   </style>
</head>
<body>
   <center>
      <h2> Fallback fonts </h2>
      <p class= "demo1"> This is an example. </p>
      <p class= "demo2"> This is an example. </p>
      <p class= "demo3"> This is an example. </p>
      <p class= "demo4"> This is an example. </p>
   </center>
</body>
</html>

在上面的例子中，文本的字体家族是font1。如果任何浏览器不支持font1字体家族，那么我们在它旁边有一个字体家族列表，可以作为后备字体使用。

结论

在网页设计中使用网络安全字体是一种很好的做法，因为它可以确保开发人员在用户的设备上显示出来。然而，网络安全字体并不是100%可信的。所以，使用CSS后备字体作为字体的备份，这样，如果一个字体家族不工作，浏览器可以尝试另一个字体。使用一个通用的字体家族作为第一种字体，然后使用相同的字体家族作为其他选项，这是很好的编码做法。