网页设计中字体属性的设置

  • 2018-09-28 06:33:51
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

font属性

当然,所有这些属性都很复杂,不过要使用所有这些属性可能更麻烦:

h1 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 30px;font-weight:900; font-style: italic; font-variant: small-caps;}

h2 {font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 24px; font-weight: bold; font-style: italic; font-variant: normal;}

通过对选择器分组可以部分地解决这个问题,不过将所有内容都合并到一个属性中不是更简单吗?这就是font属性,它是涵盖所有其他字体属性(以及少数其他内容)的一个简写属性。

一般来讲,font声明可以有上述各个字体属性的任何值,或者有一个“系统字体”值(见“使用系统字体”一节的介绍)。因此,前面的例子可以简写如下:

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

h2 (font: bold normal italic 24px  Verdana, Helvetica, Arial, sans-serif;}

我说过,网页设计样式“可以”用这种方式简写,因为还可以有其他写法,font属性可以用很宽松的方式来指定。如果仔细看前面的例子,会看到前三个值出现的顺序并不一样。在h1 规则中,前三个值依次分别是font-style、font-weight和font-variant的值,而在第二个规则中,其顺序则为font-weight、font-variant和font-style,这里没有出错,因为这三个属性值可以按任何顺序来写。此外,如果其中某个属性的值为normal,则可以忽略。因此,以下规则等价于前面的例子:

h1 {font: italic 900 small-caps 30px Verdana, Helvetica, Arial, sans-serif;}

h2 {font: bold italic 24px Verdana, Helvetica, Arial, sans-serif;}

在这个例子中,h2规则中忽略了normal值,但效果还是与前例完全相同。

不过,要认识到重要的一点,只是font的前三个值允许采用任意的顺序。后两个值则要严格得多。font-size和font-family不仅要以此顺序(font-size在前,font- family 在后)作为声明中的最后两个值,而且font声明中必须有这两个值。这很明确。如果少了其中某个属性,那么整个规则都是无效的,很可能被用户代理完全忽略。因此,以下规则会得到如图5-25所示的结果:

h1 {font: normal normal italic 30px sans-serif;}/*no problem here */

h2 {font: 1.5em sans-serif;}/* also fine; omitted values set to 'normal'*/

h3 (font: sans-serif;}/* INVALID——no 'font-size' provided */

h4 {font: lighter 14px;}/* INVALID——no 'font-family' provided */

增加行高

到目前为止,我们将font处理为就好像它只有5个值,但事实并非如此。还可以使用font设置line-height,尽管line-height是一个文本属性而不是字体属性。这可以作为对font-size值的一个补充,并用一个斜线(/)与之分隔:

body {font-size: 12px;}

h2 (font: bold italic: 200%/1.2 Verdana, Helvetica, Arial, sans-serif;}

这些规则如图5-26所示,将所有h2元素设置为粗斜体(使用sans-serif字体系列中的某个字体),将font-size设置为24px(body大小的两倍),并设置line-height为30px。

增加这个line-height值完全是可选的,就像前三个font值一样。如果确实包含了一个line-height,要记住font-size总是在line-height之前,绝对不能在line-height后面,而且这两个属性总要用一个斜线分隔。

尽管听上去有些啰嗦,不过要知道这是CSS网页设计师最常犯的错误之一,所以再强调也不为过:font中font-size和font-family值是必要的,而且顺序不能变。不过所有其他值都是可选的。

注意:line-height将在下一章讨论。

适当地使用简写

要记住重要的一点,font作为一个简写属性,如果使用不小心,可能会有预想不到的作用。考虑以下规则,如图5-27所示,

hi, h2, h3 {font: italic small-caps 250% sans-serif;}

h2 {font: 200% sans-serif;}

h3 (font-size: 150%;}

<hl>This is an h1 elemenc</hl>

<h2>This is an h2 element</h2>

<h3>This is an h3 element</h3>

h2元素既不是斜体也不是小型大写字母,而且所有元素都不是粗体,你注意到这些了吗?这种行为是正确的。在使用简写属性font时,所有被忽略的值都会重置为其默认值。因此,前面的例子可以重写如下,这仍是等价的:

h1,h2,h3{font:italic normal small-caps 250% sans-serif;}

h2 {font: normal normal normal 200% sans-serif;}

h3 {font-size: 150%;}

这会把h2元素的字体风格和变形设置为normal,将所有三个元素的font-weight设置为normal。这是简写属性的期望行为。h3与h2的命运不同,因为这里使用了属性font-size,这不是一个简写属性,因此只会影响该属性自己的值。

使用系统字体

如果希望一个Web页面结合用户操作系统的设置,在这种情况下,font的系统字体值会很方便。这些值用于取得操作系统中元素的字体大小、字体系列、字体加粗、字体风格和字体变形,并将其应用到一个元素。这些值如下:

例如,你可能想把一个按钮的字体设置为与操作系统中的按钮字体完全相同,例如:

button {font: caption;}

利用这些值,可以创建一个基于网站制作的应用,使之看上去非常类似于用户操作作系统自带的应用。

注意,系统字体可能只能整体设置,也就是说,字体系列、大小、加粗、风格等等都要一起设置。因此,上例中的按钮文本看上去与操作系统中的按钮文本完全相同,而不论其大小与按钮周围的内容是否匹配。不过,一旦已经设置了系统字体,就可以修改其中的单个值。因此,以下规则会确保按钮的字体与其父元素的字体大小相等:

button {font: caption;font-size: 1em;}

如果需要一种系统字体,但是用户机器上不存在这样一种字体,用户代理可能会试图找出一种近似的字体,如缩小caption字体的大小,从而得到small-caption字体。如果无法找到这样的近似字体,用户代理就要使用它自己的一种默认字体。如果可以找到一个系统字体,但是无法读取其所有值,就应当使用默认值。例如,用户代理可能可以找到一个status-bar字体,但是无法得到这种字体是否是small-caps的有关信息。在这种情况下,用户代理会对small-caps属性使用值normal。

注意:用户界面风格将在第13章更详细地讨论。


当前文章标题:网页设计中字体属性的设置

当前URL:http://www.lyjtt.cn/news/wzzz/font-property-setting.html

上一篇:网页设计中字体的风格和变形

下一篇:网页设计中的字体匹配

网站建设、网络营销咨询专线:181-8386-5875(点击可一键拨号)