什么是CSS中的Web安全字体和备用字体

网站旨在让用户获取有关公司、产品及其服务的信息。任何网站都需要清晰且美观，以便读者对其做出响应。排版是网站的一个重要因素，它使其保持一致，并赋予其审美外观。整个网站的形象由排版构建，这在创建品牌识别方面至关重要。如果您使用独特而一致的排版，用户将开始将某种字体与您的品牌关联起来。

通过使用良好的排版，您可以保持读者的兴趣并说服他们在您的网站上停留更长时间。通过生成良好的平衡图形和强大的视觉层级，它有助于建立网站的整体语气。此外，它影响决策方式，并对读者处理和解释文本内容的方式产生重大影响。它使内容具有吸引力，从而影响网站的可读性。

谷歌为开发人员推出了各种可免费下载的Web安全字体。在本文中，我们将讨论为开发人员提供的CSS中的Web安全字体和备用字体。

什么是Web安全字体

Web安全字体是由各种设备上的所有浏览器支持的字体。即使未安装在用户设备上，这些字体也可以使开发人员正确显示它们。

在Web安全字体开发之前，如果用户的本地系统没有安装特定字体，浏览器将显示通用字体，如Times New Roman。然而，开发人员将无法检测到字体在服务器端是否显示不正确，这会导致糟糕的用户体验。

使用Web安全字体可以解决此问题。在Web设计中，如果使用Web安全字体，您可以放心您的字体将在每个设备上正常显示。

语法

element{
   font-family: font1;
}

网络安全字体的类型

有六种类型的网络安全字体。它们如下：

Serif - 这些字体在每个字母的主体中都有小的突起。在屏幕和打印形式上阅读更容易。Times New Roman 是一种衬线字体。
Monospace - 这些字体的字母之间的间距相等。Space Mono, Courier, Inconsolata 等都是等宽字体。
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中的fallback字体

CSS提供了两种用于网页设计的字体系列。一种是通用字体系列，如衬线字体（如Times New Roman、Georgia等），另一种是个体字体系列，如Arial、Calibri等。

通用字体系列中有一些外观类似的字体系列，所以，在用户系统上不可用主要字体的情况下，会有一个 fallback 机制，其中包含一系列可替代使用的类似字体系列。这些字体被称为fallback字体。它们在网页设计中被用作备用字体，因为没有一个网页字体是100%安全的。总有可能出现错误的机会。

Fallback字体通过充当备用字体来解决这个问题。那些可以用作网络安全字体的字体系列也可以被设置为fallback字体。一些fallback字体的示例包括草书、奇幻、等宽等

语法

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

Font2, font3, font4 是备用字体，用作备份。如果浏览器不支持font1，则显示font2。如果没有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字体族，则我们有一个可以用作回退字体的字体族列表。

结论

在网页设计中使用Web安全字体是一个好的实践，因为它可以确保开发人员在用户设备上显示。然而，Web安全字体并不是100%可信赖的。因此，使用CSS回退字体作为字体的备用，这样如果一个字体族不起作用，浏览器可以尝试另一个列表中的字体。将通用字体族作为第一个字体，然后使用相同字体族作为其他选项是良好的编码实践。