CSS Fonts(字体)
CSS字体属性允许您为字体设置各种样式,例如文本的字体系列,大小和粗体,变体等。
字体属性
在CSS样式为文本内容的字体,如提供几个属性:font-family
,font-style
,font-variant
,font-weight
和font-size
。下一节将逐一介绍这些属性。
字体系列
该font-family
CSS属性允许您设置文本内容的字体系列名称,字体使用的优先级列表。
该font-family
属性可以包含多个字体名称作为后备字体。首先列出您想要的字体,然后列出所有字体(如果不可用)。如果浏览器不支持第一种字体,他将尝试下一种字体。字体系列声明可能如下所示:
p { font-family: "Times New Roman", Times, serif; }测试看看‹/›
注:如果字体系列的名称超过一个单词,它必须用引号引起来,像"Times New Roman"
,"Courier New"
,"Trebuchet MS"
等等。
了解有关常用字体组合的更多信息;请检查网络安全字体。
字体样式
通过font-style
属性设置元素的文本内容的字体样式。
此属性的可能值为:normal
,italic
或oblique
。
p.one { font-style: normal; } p.two { font-style: italic; } p.three { font-style: oblique; }测试看看‹/›
注意:乍看之下,斜式和斜体样式看起来是一样的,但是有所不同。该italic
样式使用的斜体版本的字体,而oblique
在另一方面文本仅仅是一个倾斜的版本正常的字体。
字体大小
font-size
属性设置元素文本内容的字体大小。
有几种方法可以指定字体大小值,例如,使用关键字,像素或ems。
使用关键字设置字体大小
通过在body元素上设置关键字字体大小,可以在页面上其他任何地方设置相对字体大小,从而可以轻松地在整个页面上相应地缩放字体。使用以下关键字之一指定一个绝对的大小:xx-small
,x-small
,small
,medium
,large
,x-large
,xx-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
属性时,an em
等于应用于元素父级的字体的大小。
如果font-size
在body元素上设置a 为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的组合
在所有浏览器中实现类似效果的解决方案是font-size
为body元素设置默认的百分比。一种流行的技术是font-size
将body的设置为62.5%
(即默认16px的62.5%),等于10px或0.625em。
现在,您可以设置font-size
通过将使用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
属性指定字体的粗细或粗体。
font-style属性的可能值是:normal
,bold
,bolder
,lighter
,100
,200
,300
,400
,500
,600
,700
,800
,900
和inherit
。
数值
100
-900
指定字体粗细,其中每个数字表示比其前身暗的粗细。400
与normal
&700
相同bold
。的
bolder
和lighter
,而其他的值是绝对字体权值是相对于继承字体粗细。
p { font-weight: bold; }测试看看‹/›
由于大多数字体只能以有限的重量使用。通常,它们仅以普通和粗体显示。如果字体在指定的重量中不可用,则将选择一个代替字体,它是最接近的可用重量。
字体变体
font-variant
属性允许以特殊的大写字母形式显示文本。
小写大写字母或小写大写字母与普通大写字母稍有不同,在普通大写字母中,小写字母显示为相应大写字母的较小版本。
font-variant
属性的值可能是normal
,small-caps
和inherit
。
p { font-variant: small-caps; }测试看看‹/›