数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学什么是 CSS 中的网页安全字体和备用字体？
网站的设计目的是让用户了解公司、产品及其服务的信息。任何网站都必须清晰明了，美观大方，才能引起读者的共鸣。网站的排版是使其保持一致并使其具有美感外观的关键因素。整个网站的个性都由排版来塑造，这对于创建品牌识别至关重要。如果您使用独特且一致的排版，用户将开始将某种字体与您的品牌联系起来。
使用良好的排版，您可以保持读者的兴趣，并说服他们更长时间地停留在您的网站上。它通过创建良好的图形平衡和强大的视觉层次结构来帮助建立网站的整体基调。此外，它会影响决策，并对读者如何处理和解释文本内容产生重大影响。它使内容更具吸引力，从而影响网站的可读性。
Google 为开发者推出了各种网页安全字体，可以免费下载。在本文中，我们将讨论 CSS 提供的开发者可用的网页安全字体和备用字体。
什么是网页安全字体？
网页安全字体是在任何设备上所有浏览器都支持的字体。即使这些字体未安装在用户的设备上，这些字体也能确保开发者正确显示它们。
在开发网页安全字体之前，如果用户的本地系统未安装该字体，浏览器将显示通用字体，例如Times New Roman。但是，开发者无法检测到服务器端字体是否显示不正确。这会导致糟糕的用户体验。
使用网页安全字体解决了这个问题。在网页设计中，如果您使用网页安全字体，您可以放心，您的字体将在每台设备上按原样显示。
语法
element{
font-family: font1;
}
网页安全字体的种类
有六种网页安全字体。它们如下所示：
衬线体 - 这些字体在每个字母的主体中包含小的突出部分。它们更容易在屏幕和印刷品上阅读。Times New Roman 是一种衬线体字体。
等宽字体 - 这些字体在字母之间的间距相等。Space Mono、Courier、Inconsolata 等是等宽字体。
无衬线字体 – 这些字体与衬线字体相反。它们不包含小的突出部分。Arial、Helvetica、Futura、Calibri 等是一些无衬线字体的示例。
装饰字体 - 这些字体风格化且装饰性强。Papyrus、Herculanum、Luminari 是装饰字体。
MS - 这些是 Microsoft 推出的字体。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 备用字体作为字体的备份，以便如果字体系列不起作用，浏览器可以尝试另一个已列出的字体。将通用字体系列用作第一个字体，然后使用相同类型的字体系列作为其他选项，是一种良好的编码习惯。
浏览量：586
