CSS 中的网络安全字体和后备字体是什么？

百变鹏仔 3个月前 (09-20) #CSS

文章标签字体

网站旨在为用户提供有关公司、产品和服务的信息。任何网站都需要清晰、美观，以便读者对其做出反应。网站的排版是使其一致并赋予其美感的关键因素。整个网站的个性都由排版所构建，这在创建品牌识别上至关重要。如果您使用独特而一致的排版，用户将开始将某种字体与您的品牌联系起来。

When you use good typography, you may keep readers' interest and persuade them to stay on your website for longer. By generating a solid graphic balance and a strong visual hierarchy, it aids in establishing the website's overall tone. Additionally, it influences how decisions are made and has a significant impact on how readers process and interpret the text's material. It makes the content attractive and thus impacts in the readability of the website.

通过谷歌引入的各种适用于开发者的网页安全字体，可以下载免费。在本文中，我们将讨论网络安全字体和备用字体

由CSS提供的字体可供开发人员使用。

什么是网页安全字体？

Web safe fonts are font which are supported by all the browsers on any device. These fonts enable the developers to display them properly even if they are not installed in the users’ device.

立即学习“前端免费学习笔记（深入）”；

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

Using web safe fonts resolves this issue. During web designing, if you use web safe fonts, you can be rest assured that your fonts will be displayed as it is in every device.

语法

element{   font-family: font1;}

Kinds of web safe fonts

有六种网页安全字体。它们如下所示 −

Serif - These fonts contain small protrusions that are present in the body of each letter. They are easier to read on screen and printed forms. Times New Roman is a serif font.
Monospace - 这些字体是字母之间有相等间距的字体。Space Mono、Courier、Inconsolata等都是等宽字体。
无衬线字体 - 这些字体与衬线字体相反。它们不包含小突出部分。Arial、Helvetica、Futura、Calibri等都是无衬线字体的一些例子。
幻想 - 这些字体具有高度的风格和装饰性。Papyrus，Herculanum，Luminari是幻想字体。
MS - These are the fonts introduced by Microsoft. Trebuchet MS, MS Gothic, Georgia etc., are MS fonts.
草书 - 这些字体类似于草书手写体。Brush Script MT、Broadley、Monarda、Raksana等都是一些草书字体。

Example

<!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 offers two types of font families for web designing. These are generic font families like serif (Times New Roman, Georgia, etc.,) and the individual font families like Arial, Calibri etc.,.

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

备用字体通过充当备份解决了这个问题。那些属于网络安全字体的字体族也可以设置为备用字体。一些备用字体的例子包括草书体、幻想体、等宽体等等

语法

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

Font2, font3, font4 are the fallback fonts which are used as backup. If browser doesn’t support font1, then font2 will be displayed. If not font2, then font3 is used and so on.

Example

<!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字体系列，则我们在其旁边有一个字体系列列表，可以作为备用字体使用。

Conclusion

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

文章推荐

CSS 中的网络安全字体和后备字体是什么？

什么是网页安全字体？

语法

Kinds of web safe fonts

Example

CSS中的回退字体是什么？

语法

Example

Conclusion

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写