不同的字体决定了文字的不同的展示效果,然而每台电脑上的字体并不一致,开发人员使用了某种字体,但是用户的浏览器却未必支持。就像在Microsoft Office上,加载你的文档的显示效果取决于他的安装的字体一样,CSS设计文档也是如此。

而涉及到字体变形是一样十分复杂,例如加粗或者斜体,其字体的命名风格可能也不一致。

而CSS尝试提供一些解决机制,不过它不能提供一个完全的解决方案。

字体系列

所谓字体系列是指其包含了诸多字体,这些字体每一个都是一个具体的字体风格(font face),例如Times,实际上包括了TimesRegular、TimesBold、TimesItalic、TimesOblique等等。这时我们就认为Times是一个字体系列(font family)。

除了各种特定字体系列外(如Times、 Verdana、 Helvetica或Arial),CSS还定义了5种通用字体系列:

  • Serif字体
  • Sans-Serif字体
  • Monospace字体
  • Cursive字体
  • Fantasy字体

理论上,用户安装的人和字体系列都会落入到上述某种通用系列中,例外情况很少。

使用通用字体系列

使用属性font-family采用上述任何字体系列,例如:

body {font-family: sans-serif}

浏览器就会从sans-serif字体系列中选择一个字体(例如Helvetica),并将其应用到body元素,而且font-family会继承,除非有一种更特定的选择器将后代元素覆盖,否则也会应用这种字体系列。

使用制定字体系列

我们当然也可以制定使用特定的字体,例如:

h1 {font-family: Georgia;}

如果浏览器上Georgia字体可用的话就完美了,但是如果浏览器不支持的话,浏览器这时候就会使用浏览器默认的字体来显示h1元素,除此以外什么也不做。

那么我们肯定要思考如何来实现一种当期望字体不存在时使用备用字体的方案,这点CSS2.1已经支持了,例如:

h1 {font-family: Georgia, serif;}

浏览器首先会尝试应用Georgia字体,如果不支持Georgia字体,但是安装了Times字体,用户代理就可能对h1元素使用Times。尽管Times与Georgia并不完全匹配,但至少足够接近了。

因此,强烈建议在所有的font-family规则中都提供一个通用字体系列,这样一来,就提供了一条后路,在浏览器无法提供与规则匹配的制定字体时,提供候选字体。毕竟对于不同的操作系统,例如Windows、 Mac OS、Unix等,他们默认支持的字体库是不同的,为了尽可能的表现出我们想要的结果,就应该提供多种字体方案进行匹配。例如:

p {font-family: Times, TimesNR, 'New Century Schoolbook', Georia, 'New York', serif}

我们在最后一位使用通用的字体系列,如果怕列出的字体都不可用,浏览器就会简单的选择一种可用的serif字体。

使用引号

刚才的例子中我们看到, ‘New York’是带引号引入的。当字体名称包含空格,或者包括#或$之类的符号时,我们用引号将字体名包含起来,以防止报错。例如:

h2 {font-family: Wedgie, 'Karrank%', Klingon, fantasy;}

如果没有引号,尽管规则的余下部分还会得到处理,但用户代理有可能忽略这个特定的自提名。其实根据CSS2.1的规范,包含符号的自提名不一定要加引号,但是作为一种“最佳实践”,推荐还是加上引号的好。

至于用单引号还是双引号,其实都是可以接受的。在CSS文件中,两者均可使用,而当写在html文件作为内联属性时,则必须使用单引号以防止跟style属性定义最外层的双引号冲突。

字体加粗

利用font-weight属性,对字体加粗进行控制。

字体的加粗事实上是在字体系列中具有诸多加粗的变形,例如,名为Zurich的字体的变形Zurich Bold、 Zurich Black等等。直接使用这些字体变形作为字体系列也可以达到加粗的效果,但是显然的,这太麻烦了,我们并不会去可以记住某种字体系列的加粗的变形的名称。

h1 {font-family: ‘Zurich UltraBlack’, sans-serif;} h2 {font-family: ‘Zurich Black’, sans-serif;}

所以我们可以指定他们都是用同样的字体系列,利用font-weight属性来控制加粗的程度:

h1 {font-family: ‘Zurich’, sans-serif;font-weight:bold;}

font-weight可取值除了关键词normal、 bold、bolder、lighter、inherit之外,还可以使用从100到900共9个100的倍数作为值。这九个数值从小到大表示粗度不减变化,即可能是100、200、300、400可能相同,或者200的粗度大于100,但绝不会出现100的粗度大于100。

这些值与上面的字符串关键词是有对应关系的,normal和400相同,bold和700相同。

然而字体系列中的变形数量可能并没有9个之多,所以某几个数字值可能对应同一个字体。具体细节可以参考这个值的对应计算方法,在此不多赘述了,内容比较简单。15.6 Font boldness:the’font-weight’property

那么还有属性值“bolder lighter”呢?表面即可明白“更粗 更细”之意。当我们使用font-weight: bolder时,元素会使用比父元素的font-weight更大一号的加粗,当然如果已经是900号的最粗了,那么bolder是不会变得更粗了。同样就很容易理解lighter的意义了。

字体大小

font-size属性,值包括xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger或者是一个长度值或百分数。它是一个绝对长度。

在介绍单位的时候,我们介绍了em单位,em即font-size的值。font-size属性与你看到的字体大小之间的关系是由字体的设计者来确定的。这种关系设置为字体本身中的一个em方框,就像是基线一样,所以定义字体时可能要求所有字符都小于其em方框。

绝对大小

font-size有8个绝对大小值是字符串表示的,他们并没有明确的定义,而是相对的定义的。相邻的绝对大小是通过缩放因子来计算的,不同的浏览器的缩放因子可能不同,CSS2中缩放因子可能介于1.0~1.2之间。加入medium是16px的话,那么small就是13px,large即使19px。这些都是由浏览器而确定的。

相对大小

large和smaller与font-weight中的bolder和lighter不同,它会在其父元素的绝对大小梯度上上移或下移,而且没有边界,超过最大的xx-large后仍然可以放大,小于xx-smaller后仍然可以缩小。

百分数和大小

百分数同样是根据父元素继承下来的大小进行计算,而且这种控制比larger和smaller更加细腻。

我们也可以使用em单位,1个em即为100%,所以我们当设置font-size: 1.6em即等同于font-size: 160%。

字体大小和继承

在继承过程中使用的并不是百分数而是计算值,例如strong标签的font-size为135%,如果它继承了12px,那么它的值修改为16.2px,可能会取整为16px。这种继承的计算时累加的。

这时就可能导致问题,每次都是通过计算来继承,所以取整过程会让数据慢慢的偏离。这是一种“缩放失控”。

使用长度单位

我们可以使用之前我们学习的若你和长度值来设置font-size。当然,因为不同操作系统和显示器的分辨率的问题,我们一般都使用px来设置,同时我们也会用px来设置其他图形元素的大小,这样更加方便进行页面的布局设置。

风格和变形

font-style用来设置字体风格,即斜体,它的值包括italic, oblique, normal, inherit。

在早期的操作系统中,italic和oblique两种倾斜的计算是不同的,不过在现在,这两种值得效果已经完全一致了。所以在此不做研究了。

font-variant勇于设置字体变形。其值包括small-caps, normal, inherit。除去继承的inherit,normal表示正常文本,而small-caps要求使用小型大写字母文本。 下面就是它的展示效果:

The Uses of font-variant On the Web

其计算方法为,如果是大写字母就显示成一个更大一点的大写字母,如果是小写字母就转换为大写字母。这个和直接进行大小写转换的text-transform:uppsercase并不完全相同。

拉伸和调整字体

拉伸,顾名思义会让字符变得更胖或者更瘦,属性为font-stretch,不过现在主流浏览器并不支持它,所以不做研究了。

调整字体font-size-adjust的目的是为了保证所用字体并非开发人员建议的时候仍然可以便是清楚。调整字体大小的过程很复杂,浏览器支持程度不好,在此略过了……

font属性

要同时定义多个字体相关的属性时,如果每一个都单独写的话,非常费力,长度比较长,所以比较简单的,我们直接使用font属性来定义多个字体属性。例如:

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

其意义为:斜体,粗度900,大小30px,最后是使用字体。

font属性中不同属性的定义顺序是有一定非得约束的:

  • 前三项分别为font-style、font-weight和font-variant,他们直接可以相互调换位置
  • 后两项分别为font-size和font-family,不能调换位置

增加行高

在font属性中,我们可以同时设置line-height属性,虽然line-height是文本属性而不是字体属性。设置时用“/”跟font-size结合在一起,例如:14px/1.2

使用系统字体

操作系统可能提供了一些系统字体,如果开发的页面想使用同样的字体,也可以通过设置font属性来设置:

  • caption 用于有标题的控件,如按钮
  • icon 用于对图标加标签
  • menu 用于菜单
  • message-box 用于对话框
  • small-caption 用于对小控件加标签
  • status-bar 用于窗口状态条