CSS 中的网络安全字体和后备字体是什么？-css教程-PHP中文网

首页

web前端

css教程

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

王林

Aug 25, 2023 pm 11:33 PM

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 id="Web-Safe-Fonts"> 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 id="Fallback-fonts"> 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 中的网络安全字体和后备字体是什么？的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

@KeyFrames vs CSS过渡：有什么区别？May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

使用页面CMS进行静态站点内容管理May 13, 2025 am 09:24 AM

我知道，我知道：有大量的内容管理系统选项可用，而我进行了几个测试，但实际上没有一个是一个，y＆＃039;知道吗？怪异的定价模型，艰难的自定义，有些甚至最终成为整个＆

链接HTML中CSS文件的最终指南May 13, 2025 am 12:02 AM

链接CSS文件到HTML可以通过在HTML的部分使用元素实现。1)使用标签链接本地CSS文件。2)多个CSS文件可通过添加多个标签实现。3)外部CSS文件使用绝对URL链接，如。4)确保正确使用文件路径和CSS文件加载顺序，优化性能可使用CSS预处理器合并文件。

CSS Flexbox与网格：全面评论May 12, 2025 am 12:01 AM

选择Flexbox还是Grid取决于布局需求：1)Flexbox适用于一维布局，如导航栏；2)Grid适合二维布局，如杂志式布局。两者在项目中可结合使用，提升布局效果。

如何包括CSS文件：方法和最佳实践May 11, 2025 am 12:02 AM

包含CSS文件的最佳方法是使用标签在HTML的部分引入外部CSS文件。1.使用标签引入外部CSS文件，如。2.对于小型调整，可以使用内联CSS，但应谨慎使用。3.大型项目可使用CSS预处理器如Sass或Less，通过@import导入其他CSS文件。4.为了性能，应合并CSS文件并使用CDN，同时使用工具如CSSNano进行压缩。

Flexbox vs Grid：我应该学习两者吗？May 10, 2025 am 12:01 AM

是的，youshouldlearnbothflexboxandgrid.1）flexboxisidealforone-demensional，flexiblelayoutslikenavigationmenus.2）gridexcelstcelsintwo-dimensional，confffferDesignssignssuchasmagagazineLayouts.3）blosebothenHancesSunHanceSlineHancesLayOutflexibilitibilitibilitibilitibilityAnderibilitibilityAndresponScormentilial anderingStruction

轨道力学（或我如何优化CSS KeyFrames动画）May 09, 2025 am 09:57 AM

重构自己的代码看起来是什么样的？约翰·瑞亚（John Rhea）挑选了他写的一个旧的CSS动画，并介绍了优化它的思维过程。

CSS动画：很难创建它们吗？May 09, 2025 am 12:03 AM

CSSanimationsarenotinherentlyhardbutrequirepracticeandunderstandingofCSSpropertiesandtimingfunctions.1)Startwithsimpleanimationslikescalingabuttononhoverusingkeyframes.2)Useeasingfunctionslikecubic-bezierfornaturaleffects,suchasabounceanimation.3)For

See all articles