此 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 等字体系列。
font-family: family-name|generic-family|initial|inherit;
价值观
让我们看看 font-family 属性的值。
family-name/generic-family:它是字体系列名称和通用系列名称的列表。
initial:用于将属性设置为其默认值。
继承:用于从其父元素继承属性。
让我们通过一个插图来理解它。
<!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>