CSS font-family字体系列

此 CSS 属性用于提供以逗号分隔的字体系列列表。它为元素的文本内容设置字体。此属性可以包含多个字体名称作为后备系统,即,如果浏览器不支持一种字体,则可以使用其他字体。不同的字体系列用于制作有吸引力的网页。

CSS 中有两种字体系列名称,定义如下:

  • family-name:是字体系列的名称,如“Courier”、“Arial”、“Times”等。

  • generic-family:通用族的名称,包括“serif”、“sans-serif”、“cursive”、“fantasy”和“monospace”五个类别。它应该放在字体系列名称列表的最后。

让我们定义通用系列类别。

serif:它主要用于我们编写印刷文本时,例如书籍、杂志、报纸等。它包括字体系列,例如 Georgia、Garamond、Times New Roman、Minion 等。

sans-serif:这是一种现代、正式和简单的风格。它被广泛使用,但最常见的是文本的数字形式。它包括 Arial、Calibri、Verdana、Futura、Lato 等字体系列。

草书:主要用于书写邀请函、非正式信息等。就像用钢笔或毛笔书写的手写文字。它包含的字体系列是 Insolente、Corsiva、Flanella、Belluccia、Zapfino 等等。

monospace:用于说明、邮寄地址、打字文本等。它包括 Monaco、SimSun、Courier、Consolas、Inconsolata 等字体系列。

幻想:它使文本具有表现力、装饰性和影响力。它包括 Impact、Copperplate、Cracked、Critter 等字体系列。

句法 (Syntax)

font-family: family-name|generic-family|initial|inherit;

价值观

让我们看看 font-family 属性的值。

family-name/generic-family:它是字体系列名称和通用系列名称的列表。

initial:用于将属性设置为其默认值。

继承:用于从其父元素继承属性。

让我们通过一个插图来理解它。

例子 (Example)

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body{  
text-align:center;  
}  
h1.a {  
  font-family: "Times New Roman", Times, serif;  
  color:Red;  
}  
  
h2.b {  
  font-family: Arial, Helvetica, sans-serif;  
  color:blue;  
}  
</style>  
</head>  
<body>  
<h1>The font-family Property</h1>  
  
<h1 class="a">Hello World :) :)</h1>  
  
<h2 class="b">Welcome to the javaTpoint.com</h2>  
  
</body>  
</html>


  • 使用社交账号登录,本站支持
全部评论(0)