我是HTML和CSS的初学者。我对font-family
属性感到困惑。
我声明font-family
如下:
{
font-family:cambria, sans-serif, georgia;
}
但是当我删除sans-serif, georgia
部分时,视觉外观保持不变。
为什么要声明font-family
以及它与font
的区别?
答案 0 :(得分:8)
font
声明是简写,允许我们设置font-size
,font-weight
,font-family
,font-variant
和{{ 1}}。一体。 (就像line-height
是background
,background-color
,background-url
以及其他几个与背景相关的属性的简写一样。)
background-image
本身允许我们指定初始字体,以及在不能使用初始字体时使用的通用字体。在您的情况下,font-family
是初始字体,cambria
是在用户的系统没有sans-serif
字体时使用的后备字体样式,如果没有,则使用cambria
用户系统中存在georgia
字体。
答案 1 :(得分:5)
{
font-family:cambria, sans-serif, georgia;
}
意思是:
如果您的浏览器不支持cambria
使用sans-serif
如果不支持sans-serif
请使用georgia
,如果不支持georgia
则会显示默认字体
Font: 12px bold cambria, sans-serif;
表示:font-size / font-weight / font-family
答案 2 :(得分:3)
按照欲望的顺序列出字体。页面将尝试加载cambria,但如果用户没有cambria,它将尝试任何sans-serif字体,最后它将尝试georgia。
想象一下,如果您使用的是所有用户可能没有的特定字体,您需要提供备份,以便在用户没有您的第一个所需字体的情况下不会出现系统默认字体
答案 3 :(得分:2)
它是一个优先列表;尝试使用第一种字体,如果没有,请尝试第二种,依此类推。
font {}
包含font-family
,因为它可以在一次传递中设置多个font-*
值,请参阅here。
答案 4 :(得分:2)
使用font-family时,您特意声明要使用的字体类型。另一方面,只使用'字体'属性,您可以声明各种字体样式属性。
Font-Family: cambria, sans-serif, georgia;
这样做会告诉浏览器您更喜欢使用' cambria'字体,如果在这个浏览器中不存在该字体,你想使用“sans-serif'”等等。
Font: 12px bold cambria, sans-serif;
这允许您将多个值放在一个位置。
答案 5 :(得分:2)
字体系列是一个列表,如果您指定的第一个字体无法显示,则将加载第二个字体,如果第二个字体无法加载,则将显示第三个字体。
答案 6 :(得分:2)
font-family是一个CSS属性,它接受指定元素字体的字体系列名称的优先级列表。如果列表中指示的第一个字体在浏览器上不可用,则可以使用逗号分隔的值来表示它们是替代值。
{
font-family: cambria, sans-serif, georgia;
}
这意味着如果字体" cambria"它不会在浏览器中选择" sans-serif"等等。
答案 7 :(得分:1)
font-family
属性按优先顺序指定要尝试的字体系列列表。它不会影响其他与字体相关的属性,除非该选项影响normal
line-height
的含义(取决于字体和浏览器)。
相反,使用font
速记属性始终设置所有字体相关属性,但只需要明确指定字体大小和字体系列,例如font: 1em Cambria
;然后将其他属性设置为其初始值。
使用font-family
的值,以便对于元素内容中的每个字符,使用列表中的第一个字体系列,如果a)字体系列在用户的系统中可用和< / em> b)该系列中适用的字体包含该字符的字形。 (这是已定义的机制,但已知浏览器部分错误地实现它。)
在示例中,如果用户的系统具有Cambria并且它包含相关元素中所有字符的字形,则font-family
值中的其他值无效。如果在Cambria中存在但在浏览器使用的字体中存在的字符为通用sans-serif
字体,则使用后者 - 可能会创建样式不匹配。 (一般来说,像Cambria这样的衬线字体应该有衬线回落。)georgia
部分只在系统具有格鲁吉亚但缺少Cambria 和浏览器的默认值{{1}的非常不可能的情况下才有意义字体在内容中不包含某些字符,但格鲁吉亚确实如此。
您是使用sans-serif
(以及其他特定字体属性)还是使用font-family
简写,或两者兼而有之,都是判断和品味的问题。从概念上讲,单独设置所有字体属性要简单得多。就代码长度而言,font
可以为您节省一些时间。