css字体属性font – CSS教程 css字体属性|CSS

【css字体属性font – CSS教程】上一章CSS教程请查看：css背景属性background
CSS字体属性允许你为字体设置各种样式，如字体族、大小和粗体、文本的变体等。
字体属性CSS为文本内容的样式字体提供了几个属性，比如：font-family, font-style, font-variant, font-weight和font-size,下一节将逐一介绍这些属性。
字体族font-familyfont-family CSS属性允许你为选定元素的文本内容设置字体名称和/或通用名称的优先列表。
font-family属性可以容纳多个字体名称作为后备系统。首先列出你想要的字体，然后如果第一个字体不可用，那么可以填充它的任何字体。你应该用一个通用字体家族来结束列表，它有5个serif, sans-serif, monospace，cursive和fantasy。字体族声明可能是这样的：

p { font-family: "Times New Roman", Times, serif; }

注意：如果字体族的名称超过一个单词，它必须用引号括起来，如“Times New Roman”、“Courier New”、“Trebuchet MS”等。
了解更多有关常用字型组合的资料; 请查看web安全字体。
字体样式font-style属性设置元素的文本内容的字体样式。
此属性的可能值为：正常normal、斜体italic或斜体oblique。

p.one { font-style: normal; } p.two { font-style: italic; } p.three { font-style: oblique; }

注意：斜体和斜体初看起来是一样的，但是有区别，斜体样式使用字体的斜体版本，而斜体文本则是普通字体的倾斜版本。
字体大小font-size属性设置元素的文本内容的字体大小。
有几种方法可以指定字体大小值，例如使用关键字、像素或ems。
使用关键字设置字体大小通过在body元素上设置关键字字体大小，你可以在页面的其他地方设置相对字体大小，从而使你能够轻松地在整个页面上相应地调整字体大小。使用以下关键字之一指定绝对大小：x-small、x-small、small、medium、large、x-large、x-large。
使用以下关键字之一指定相对大小：smaller和larger。

body { font-size: large; } h1 { font-size: larger; } p { font-size: smaller; }

设置字体大小与像素设置字体大小的像素值(如12px, 16px等)是一个很好的选择，当你需要像素的准确性。但是，不同浏览器的结果可能会有所不同，因为它们使用不同的算法来实现类似的效果。

h1 { font-size: 24px; } p { font-size: 14px; }

以像素为单位定义字体大小不是很方便，因为用户无法通过浏览器设置更改字体大小。例如，视力有限的用户可能希望将字体大小设置为大于你指定的大小。因此，如果你希望创建一个包容性的设计，应该避免将像素值用于字体大小。
提示：文本可以使用缩放工具在所有浏览器中调整大小。但是，这个特性会调整整个页面的大小，而不仅仅是文本。
使用Em设置字体大小em单元指的是父元素的字体大小。
em值的大小是动态的。在定义font-size属性时，em等于应用于元素父元素的字体大小。
如果在body元素上设置20px的字体大小，那么1em = 20px, 2em = 40px。
如果你没有在页面的任何地方设置字体大小，那么它就是浏览器的默认值，可能是16px。因此，默认情况下1em = 16px, 2em = 32px。

h1 { font-size: 2em; /* 32px/16px=2em */ } p { font-size: 0.875em; /* 14px/16px=0.875em */ }

警告:IE6和IE7不可接受地夸大了调整大小的文本的大小。(在发布之前进行测试)。
使用百分比和Em的组合在所有浏览器中实现类似效果的解决方案是为body元素设置一个默认的字体大小百分比。一种流行的技术是将正文的字体大小设置为62.5%(即默认的16px的62.5%)，这等于10px或0.625em。
现在，你可以使用em单元设置任何元素的字体大小，通过将px值除以10进行简单易记的转换。这样，10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em，依此类推。请看下面的例子：

body { font-size: 62.5%; /* font-size 1em = 10px */ } p { font-size: 1.6em; /* 1.6em = 16px */ }

提示：万维网联盟(W3C)建议使用em或百分比(%)值来创建更健壮和可伸缩的布局。
字体粗细字体font-weight属性指定字体的粗细或粗细。
字体样式属性的可能值为：normal、bold、bold、lighter、100、200、300、400、500、600、700、800、900和inherit。

数值100-900指定字体的权重，其中每个数字表示比前一个数字深的一个权重。400表示正常，700表示粗体。
更粗和更轻的值相对于继承的字体权重，而其他值是绝对字体权重。

p { font-weight: bold; }

由于大多数字体只能在有限数量的权重中使用; 通常它们只有普通和粗体两种。如果该字体在指定的权重中不可用，则将选择最接近的可用权重。
字体变体font-variant属性允许文本以特殊的小写变体显示。
小写字母或小大写字母与正常的大写字母略有不同，在正常的大写字母中，小写字母作为对应大写字母的小版本出现。
font-variant属性的可能值是normal、small-caps和inherit。