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

cssweb developmentfront end technology更新于 2025/1/13 20:28:17

网站的设计旨在让用户了解公司、产品及其服务。任何网站都需要清晰美观，以便读者能够快速浏览。网站的排版是保持网站一致性和美观度的关键因素。网站的整体个性由排版构建，这对于创建品牌识别至关重要。如果您使用独特且一致的排版，用户就会开始将某种字体与您的品牌联系起来。

使用优质的排版，您可以吸引读者的兴趣，并让他们更长时间地停留在您的网站上。通过创建平衡的图形和强大的视觉层次，它有助于确立网站的整体基调。此外，它还会影响决策的制定方式，并对读者处理和解读文本内容的方式产生重大影响。它使内容更具吸引力，从而提高网站的可读性。

Google 为开发者推出了各种可免费下载的网页安全字体。本文将讨论 CSS 为开发者提供的网页安全字体和备用字体。

什么是网页安全字体?

网页安全字体是指所有设备上的浏览器都支持的字体。即使用户的设备未安装这些字体，开发者也能正常显示它们。

在网页安全字体开发之前，如果用户的本地系统未安装该字体，浏览器会显示诸如 Times New Roman 之类的通用字体。然而，如果服务器端的字体显示不正确，开发者无法检测到。这会导致用户体验不佳。

使用网页安全字体可以解决这个问题。在网页设计过程中，如果您使用网页安全字体，则可以放心，您的字体在任何设备上都会保持原样。

语法

element{
    font-family: font1;
}

网页安全字体的种类

网页安全字体有六种，具体如下:

衬线字体 - 这些字体在每个字母的主体部分都有小的突起。它们在屏幕和打印表格上更易于阅读。Times New Roman 就是一种衬线字体。
等宽字体 - 这些字体的字母间距相等。 Space Mono、Courier、Inconsolata 等都属于等宽字体。
Sans-serif – 这些字体与衬线字体相反。它们不包含小的突起。Arial、Helvetica、Futura、Calibri 等都是无衬线字体的例子。
Fantasy – 这些字体风格鲜明，装饰性十足。Papyrus、Herculanum、Luminari 都属于 Fantasy 字体。
MS – 这些是微软推出的字体。 Trebuchet MS、MS Gothic、Georgia 等都是 MS 字体。
草书- 这些字体类似于草书手写体。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 是备用字体。如果浏览器不支持 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 字体系列，我们会在其旁边列出可用作后备字体的字体系列列表。

结论

在网页设计中使用网络安全字体是一种很好的做法，因为它可以确保开发人员的字体能够在用户的设备上正常显示。然而，网络安全字体并非 100% 可靠。因此，请使用 CSS 后备字体作为字体的备份，这样如果某个字体系列无法正常工作，浏览器可以尝试其他支持的字体系列。良好的编码习惯是使用通用字体系列作为首选字体，然后使用与其他选项相同的字体系列。