层叠样式表第2级 CSS2规范开发手册 - WEB前端开发 专注前端开发,关注用户体验

15 字体

    目录

15.1 简介

    一旦文档的文本要可见地显示,字符(抽象信息元)必须被映射到抽象字型。一个或多个字符可以被一个或多个字型表示,可能是以内容相关的方式。一个字型是一个抽象字型的实际的艺术的体现,在某些印刷样式中,可能以轮廓或点阵图的形式画在屏幕或纸张上。一个字体是字型的一个集合,所有元素根据设计、尺寸、呈现及其他和整个集合相关联的属性,遵循相同的主题,还包括从字符到抽象字型的映射机制。

    在实际地渲染一个字符前,图形用户端必须考虑如下事项:

    在CSS1和CSS2中,作者通过一系列字体属性来指定字体的特征。

    如果在客户端没有匹配的字体,用户端如何处理这些属性在CSS1到CSS2的升级中得到扩充。CSS1中,所有的字体都被假定在客户端系统中存在,并仅以名字为标记。候选的字体可以通过属性得到指定,但是如果超过了这一步,用户端没有任何方法提供别的字体给用户(即使用户端具备样式相似的字体),而只能提供通用的缺省字体。

    CSS2改变了这一切,给予更多的自由使得:

    CSS2改进了客户端的字体匹配,允许字体综合和渐进渲染,并允许字体从网络上下载。这些增强的能力被称为“网络字体”。

    CSS2字体模型中,和CSS1中类似,每一个用户端有一个“字体数据库”的配置。CSS1引用该数据库,但是不能给出其中内容的细节。CSS2定义了数据库中的信息,并且允许样式表作者对其提供信息。一旦被要求以一个特定的字体显示一个字符,用户端首先在数据库中找到“最合适”的那个特定的字体(根据字体匹配算法)。一旦确定了一个字体,它或者在局部或者从网络上获得字体的数据,并使用那些字型来显示字符。

    根据这个模型,我们将字体规范分为两个部分。第一部分讨论了字体说明机制,作者指定了他们希望使用的是什么字体。第二部分讨论了字体选择机制,客户的用户端确定并装载与作者的规定最合适的字体。

    用户端如何构筑字体数据库在本规范讨论之外,因为数据库的实现依赖于 操作系统,窗口系统,客户端等诸多因素。

15.2 字体说明

    CSS字体机制的第一阶段牵涉到样式表的作者如何指定用户端应该使用哪一个字体。一开始,看上去最明显的指定一个字体的方法是通过字体的名字,一个单字符串——看起来被分割为独立的部分;例如"BT Swiss 721 Heavy Italic"

    不幸的是,不存在一个完美定义并为大众接受的分类,来基于名字对字体进行划分,而且,适用于一个字体家族名的术语对于其它字体可能就不合适。例如,术语'italic'通常被用来标记倾斜的文本,但是倾斜的文本也可能被标记为Oblique,Slanted,Incline,CursiveKursiv。类似的,字体名通常包含描述字体“重量”的术语。这些名字的最根本的角色是在单一的字体家族中对不同的黑度加以区别。这些重量名并没有广泛接受的含义,其用法也差异颇多。例如,你可能认为一个字体被标记为黑体,但是它也可能被描述为Regular,Roman,Book,Medium,Semi-Demi-Bold,Bold,Black,这完全取决于设计字体的“正常”字体有多黑。

    缺乏命名的系统性,使得通常情况下,生成一个修改过的字体名,如更黑一点这样的特定变化,成为不可能。

    基于这一原因,CSS使用一种不同的模型。请求字体不再通过一个单一的字体名,而是通过设置一系列的字体属性。这些属性值构成了用户端字体选择机制的基础。字体属性可以被个别修改,例如,增加黑度。新的字体属性值的集合再被用来从字体数据库中选择字体。这样做的结果是增加了样式表的作者和实现者的规范性和健壮性。

15.2.1 字体说明的属性

    CSS2根据如下特性来指定字体:

字体家族
字体家族指定了使用哪一个字体家族来渲染文本。字体家族是一组字体,设计时考虑到联合使用并表现相似。家族中的一员可以是斜体,另一个是粗体,另一个是紧缩或使用小的大写字母。字体家族名包括"Helvetica","New Century Schoolbook"及"Kyokasho ICA L"。字体家族名不局限于拉丁字母。字体家族可以根据不同的类别分组:有或没有衬线,是否等宽,是否手写体,是否奇异字体等。
字体样式
字体样式指定文本是否渲染为常规或斜体。斜体相对常规字体比较倾斜,但是还不如草书字体那么斜。侧体是常规体的倾斜形式,更多地与无衬线字体联用。这样的定义避免了将稍微倾斜的常规字体标记为侧体,或将常规的希腊字母标记为斜体。
字体变体
字体变体规定小写字符文本的渲染是用一般的字型还是用小的大写字型。某一特定字体可能只包括常规字型,只包括小的大写字型,或者包括这两者;该属性用来要求一个合适的字体,而且如果该字体包含两个字型,使用合适的字型。
字体重量
字体重量是指渲染文本的字型相对于同一字体家族其它字型的轻重程度。
字体扩展
字体扩展表示了用来渲染文本的字型相对于同一字体家族其它字体而压缩或扩展的数量。
字体尺寸
字体尺寸是指设置为实心体时从基线到基线的字体的大小(在CSS术语中,相当于 'font-size''line-height'属性取值相同)。

    所有的属性,除了'font-size','em'和'ex'长度值将基于当前元素的字体大小。对于'font-size',这些长度单位基于父元素的字体大小。更多的信息请参见长度单位一节。

    CSS字体属性用来描述文档中文本要求的呈现。相反地,字体描述子用来描述字体的特性,从而可以选择一个合适的字体来创建要求的呈现。有关字体分类的信息,请参见字体选择子一节。

15.2.2 字体家族'font-family'属性

'font-family'
值:  [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit
初始值:  取决于用户端
适用于:  所有元素
可否继承:  
百分比:  N/A
媒介:  图形

    该属性指定了一个字体家族名和/或通用家族名的优先级列表。为了解决一个单一字体可能没有包括显示文档中所有字符的字型,或系统中并不包含所有的字体的问题,该属性允许作者指定一个字体列表,它们都有相同的样式和尺寸,并逐一尝试以检测它们是否包含一个特定字符的字型。该列表被称为字体集

例子:

    例如,包含英文单词并混合了数学符号的文本可能需要两个字体的字体集,一个包含拉丁字母和数字,另外一个包含数学符号。如果文本可能包含拉丁字母,日语字母和数学符号,下面的例子给出一个合适的字体集:

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

    "Baskerville"字体(只包含拉丁字母的字体)中包含的字型将提供可用的字型,日文字型将来自"Heisi Mincho W3",而数学符号字型来自"Symbol"。其它的将来自通用字体家族'serif'。

    如果字体集中的另外一个或多个字体不可用,将使用通用字体家族。尽管很多字体提供“缺少的字符”字型,通常是一个方框,不能把这个理解为一个匹配,除非该字体已经是字体集中最后的一个字体。

    有两种类型的字体家族名:

<family-name>
选择的字体家族名。上例中,"Baskerville","Heisi Mincho W3"和"Symbol"是字体家族。包含空白的字体名应该用引号分割。如果省略了引号,字体名前或后的任何空白将被忽略,而字体名内的任何空白字符序列将被转换为一个空格。
<generic-family>
定义的通用家族如下:'serif','sans-serif','cursive','fantasy'和'monospace'。这些家族的描述请参见通用字体家族一节。通用字体家族名是关键字,因此不可以放在引号中。

为了提高健壮性,我们鼓励作者提供一个通用字体家族作为最后的字体选择。

    例如:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE type="text/css">
      BODY { font-family: "new century schoolbook", serif }
    </STYLE>
  </HEAD>
  <BODY>
   <H1 style="font-family: 'My own font', fantasy">Test</H1>
    <P>What's up, Doc?
  </BODY>
</HTML>

例子:

    CSS2丰富的选择子语法可以用来创建语言相关的印刷效果。例如,某些中文和日文字符具有相同的Unicode编码,但是在两种语言中,抽象字型是不同的。

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif }
*:lang(cn) { font: 800 14pt/16.5pt "宋体", serif }

    它选择了给定语言的任何元素——日文或简体中文——并要求合适的字体。

15.2.3 字体样式'font-style''font-variant''font-weight''font-stretch'属性

'font-style'
值:  normal | italic | oblique | inherit
初始值:  normal
适用于:  所有元素
可否继承:  
百分比:  N/A
媒介:  图形

     'font-style'属性要求字体家族中常规(有时称为"roman"或"upright"),斜体和侧体的样式。取值含义如下:

normal
指定一个在用户端分类为'normal'的字体。
oblique
指定一个在用户端分类为'oblique'的字体。字体名中带有Oblique,Slanted或Incline的字体在字体数据库中通常标记为'oblique'。在用户端数据库中标记为'oblique'的字体实际上可能是通过将常规字体电子地侧偏而得到。
italic
指定一个在用户端字体数据库分类为'italic'的字体,或者如果该类字体不存在,改用'oblique'。字体名中带有Italic,CursiveKursiv的字体通常标记为'italic'。

例子:

    本例中,H1/H2/H3元素的常规文本以斜体显示。但是,H1内的强调文本(EM)以常规体显示。

H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
'font-variant'
值:  normal | small-caps | inherit
初始值:  normal
使用于:  所有元素
可否继承:  
百分比:  N/A
媒介:  图形

    小型大写字体的小写字母的字型和大写字母的字型相似,但是尺寸较小且比例略有不同。'font-variant'属性要求一个字体是二制的(有两个大小写状态状态,如拉丁语言)。该属性对于单制的语言(只有一个大小写状态,如大部分世界上的书写系统)没有视觉上的效果。取值含义如下:

normal
指定一个未标记为小型大写字体的字体。
small-caps
指定一个标记为小型大写字体的字体。如果找不到原始的小型大写字体,用户端应该模拟一个,例如可以通过使用一个常规字体,并将其小写字母替换为缩小过的大写字母。作为最后的措施,常规字体中未缩小的大写字母替换小型大写字体中的字型,因此文本全部以大写字母出现。

例子:

    下面的例子设置一个H3元素为小型大写字母,而强调的单词(EM)是侧的小型大写字母。

H3 { font-variant: small-caps }
EM { font-style: oblique }

    鉴于该属性使文本转换到大写,对于'text-transform'的考虑也同样适用。

'font-weight'
值:  normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
初始值:  normal
适用于:  所有元素
可否继承:  
百分比:  N/A
媒介:  图形

    'font-weight'属性指定了字体的重量。取值的含义如下:

100 to 900
这些值构成了一个有序系列,每一个数字表示一个重量,它表示的重量至少和它的前一数字相同。
normal
等于'400'。
bold
等于'700'。
bolder
指定比继承的重量较重的字体的下一个重量并分配给字体。如果没有这样的重量,它等于下一个更重的数字值(而字体保持不变),除非继承值为'900',此时结果重量也是'900'。
lighter
指定比继承的重量较轻的字体的下一个重量并分配给字体。如果没有这样的重量,它等于下一个更轻的数字值(而字体保持不变),除非继承值为'100',此时结果重量也是'100'。

Example(s):

P { font-weight: normal }   /* 400 */
H1 { font-weight: 700 }     /* bold */
BODY { font-weight: 400 }
STRONG { font-weight: bolder } /* 500 if available */

    子元素继承重量的计算值

'font-stretch'
值:  normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
初始值:  normal
适用于:  所有元素
可否继承:  
百分比:  N/A
媒介:  图形

     'font-stretch'属性在一个字体家族中选择一个常规,压缩或扩展的字体样子。绝对值关键字的顺序如下(从最窄到最宽):

  1. ultra-condensed
  2. extra-condensed
  3. condensed
  4. semi-condensed
  5. normal
  6. semi-expanded
  7. expanded
  8. extra-expanded
  9. ultra-expanded

    相对值关键字'wider'将根据继承而来的值设置为下一个扩展的值(不超过'ultra-expanded');相对值关键字'narrower'将根据继承而来的值设置为上一个压缩的值(不低于'ultra-condensed')。

15.2.4 字体尺寸'font-size''font-size-adjust'属性

'font-size'
值:  <absolute-size> | <relative-size> | <length> | <percentage> | inherit
初始值:  medium
适用于:  所有元素
可否继承:  可,继承计算值
百分比:  基于父元素的字体尺寸
媒介:  图形

    该属性字体为实心时的字体尺寸。取值的含义如下:

<absolute-size>
<absolute-size>关键字引用用户端计算并保持的字体尺寸表中的一个值。可能的取值是:

     [ xx-small | x-small | small | medium | large | x-large | xx-large ]

    计算机屏幕上,相邻索引间的缩放系数建议为1.2;如果'medium'字体为12pt,则'large'字体为14.4pt。不同的媒介可能需要不同的缩放系数。同样的,在计算表的时候,用户端应该考虑到字体的质量和可用性。该表格对于不同的字体家族可能不同。

注意。CSS1中,相邻索引间的缩放系数推荐为1.5,根据用户的体验,该数值是太大了。

<relative-size>
<relative-size>关键字被解释为相对表中的字体尺寸和父元素的字体尺寸。可能的取值为:

     [ larger | smaller ]

例如,如果父元素的字体尺寸为'medium','larger'值将使当前元素的字体尺寸为'large'。如果父元素的尺寸不靠近表格项中的值,用户端可以自由地在表格项中插值或圆整到最接近的那一个。如果数字值超过了关键字的范围,用户端可能需要对表格值进行外插。

<length>
长度值指定了一个绝对的字体尺寸(和用户端的字体尺寸表无关)。负数值是非法的。
<percentage>
一个百分比值指定了一个相对于父元素字体尺寸的绝对字体尺寸。使用百分比值或以'em'表示的值,将得到更加健壮和容易层叠的样式表。

    该属性的实际值可能和计算值不同,这是由于'font-size-adjust'的数字值和某些字体尺寸不可用。

    子元素继承了'font-size'的计算值(否则,'font-size-adjust'的效果将得到复合)。

例子:

P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
'font-size-adjust'
值:  <number> | none | inherit
初始值:  none
适用于:  所有元素
可否继承:  
百分比:  N/A
媒介:  图形

    在双制语言中,字体主观上的明显尺寸和可读性不怎么依赖于它们的'font-size'值,它们更依赖于'x-height',或者,更为有用的是,上述两者的比值,称为视觉值(字体尺寸除以x-height)。该值越大,说明该字体较小的尺寸也可读。反之,如果视觉值低,在一个阈值之下,字体将迅速地成为不可读,其速度要比视觉值高的字体大的多。简单的字体替换如果只基于字体尺寸可能导致不可读的字符。

    例如,一种很普遍的字体Verdana的视觉值为0.58;当Verdana字体的尺寸为100个单位时,它的x-height为58个单位units。作为对比,Times New Roman字体的视觉值为0.46。因此,Verdana在较小尺寸时的可见性要比Times New Roman好。相反地,如果对于一个给定的尺寸,用Verdana来替换Times New Roman,前者经常会显得“太大”。

    该属性允许作者对于一个元素指定一个视觉值,以保持可替换字体列表中的第一选择字体的。取值的含义如下:

none
不要保持字体的x-height。
<number>
指定视觉值。该数字引用了第一选择字体的视觉值。可用字体的缩放系数根据如下公式计算:
  y*(a/a') = c

    其中:

y = 第一选择字体的'font-size'
a' =可选字体的视觉值
c = 应用到可用字体的'font-size'

例子:

    例如,如果14px的Verdana(视觉值0.58)不可用而可用字体的视觉值为0.46,替换的字体尺寸应该是14 * (0.58/0.46) = 17.65px.

    字体尺寸调整在计算'font-size'实际值时发生。由于继承的是计算值,子元素继承的是未调整的值。

    下面的第一张图显示了若干个字体,以相同的字体尺寸,栅格方式显示(11pt,72 ppi),以及它们的视觉值。注意,视觉值高的字体比视觉值低的字体看起来要大。视觉值过低的字体在给定的尺寸时,几乎不可读。

    Comparison of 12 point fonts

    下一张图形显示了'font-size-adjust'的效果。其中Verdana作为“第一选择”,以及所应用的缩放系数。调整过后,各字体显示的尺寸几乎相同,但是它们实际的(em)尺寸相差大于100%。注意'font-size-adjust'也倾向于固定水平线的量度。

    Comparison of font-adjusted fonts

15.2.5 缩写的字体属性'font'属性

'font'
值:  [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
初始值:  参见各独立属性
适用于:  所有元素
可否继承:  
百分比:  允许用在'font-size'和'line-height'上
媒介:  图形

     除了如下所述的属性,'font'属性是一个在样式表中同一处设置'font-style''font-variant''font-weight''font-size''line-height'以及'font-family'的缩写属性。该属性的语法基于常规的印刷缩写术语来设置与字体相关的多项特性。

    所有与字体相关的字体首先被重置为它们的初始值,包括上面列出的那些属性,加上'font-stretch''font-size-adjust'。然后,这些属性被显式设置为在'font'缩写属性中的值。允许值和初始值的列表可以参见以前的属性定义。为了考虑向后兼容性,使用'font'缩写属性不可能将'font-stretch''font-size-adjust'设置为初始值之外的值;相反地,对这两个属性应该单独设置。

例子:

P { font: 12pt/14pt sans-serif }
P { font: 80% sans-serif }
P { font: x-large/110% "new century schoolbook", serif }
P { font: bold italic large Palatino, serif }
P { font: normal small-caps 120%/120% fantasy }
P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

    第二个规则中,字体尺寸的百分比值('80%')基于其父元素的字体尺寸。第三个规则中,行高百分比('110%')基于元素自身的字体尺寸。

    前三个规则没有显式指定'font-variant''font-weight',因此这些属性为它们的初始值('normal')。注意到字体家族名"new century schoolbook"中包含空格,因此放置在一对引号中。第四条规则设置了'font-weight'为'bold',而'font-style'为'italic',并隐式地设置了'font-variant'为'normal'。

    第五条规则设置了'font-variant'('small-caps'),'font-size'(父元素字体尺寸的120%),'line-height'(字体尺寸的120%)以及'font-family'('fantasy')。关键字'normal'将适用于另外两个属性:'font-style''font-weight'

    第六条规则设置了'font-style''font-size''font-family',其它字体的属性设置为它们的初始值。然后它又设置了'font-stretch'为'condensed',因为该属性不可以用'font'缩写属性设置为那个值。

    下列值代表了系统字体

caption
带标题的控件(如按钮,下拉框等)的字体。
icon
标记图标的字体。
menu
用在菜单中的字体(如下拉菜单和菜单项)。
message-box
对话框中使用的字体。
small-caption
标记小控件的字体。
status-bar
用在窗口状态条的字体。

    系统字体只能全体设置;也就是说,字体家族,尺寸,重量,样式等都同时设置。如果需要的话,这些值还可以个别地修改。如果在特定的平台上带有指定特性的字体不存在,用户端要么进行智能替换(如,将用于'caption'的字体的较小的字体版本用作'smallcaption'字体),或者替换为用户端的缺省字体。对于常规字体而言,如果一个系统字体中的任何个别属性并不是操作系统中可用的用户偏好的一部分,这些属性应该被设置为它们的初始值。

    这就是为什么该属性“几乎”是一个缩写属性:系统字体只能用该属性指定,而不是用'font-family'本身,因此'font'允许作者所做的比各子属性简单相加的要多。不过,某些个别属性,如'font-weight'还是从系统字体中获得值,并可以独立地变化。

例子:

BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif }
BUTTON P { font: menu }
BUTTON P EM { font-weight: bolder }

    比方说,如果某一特定系统的下拉菜单字体为9-point Charcoal,重量为600,那么作为BUTTON元素的子元素的P元素的显示效果就如同设置了如下的规则:

BUTTON P { font: 600 9pt Charcoal }

    由于'font'缩写属性将任何未显式指定值的属性重置为初始值,该声明的效果就如同于如下的声明:

BUTTON P {
  font-style: normal;
  font-variant: normal;
  font-weight: 600;
  font-size: 9pt;
  line-height: normal;
  font-family: Charcoal
} 

15.2.6 通用字体家族

    通用字体家族是一个备用的机制,用来在最坏的情况:所有指定的字体都不可用时,保留样式表作者部分的要求。较好的印刷控制要求在样式表中应该使用命名的字体。

    所有五个通用字体家族都在所有的CSS实现中得到定义并存在(它们并不一定映射到五个不同的实际字体)。

    用户端应该提供通用字体家族的比较恰当的缺省选择,它既表达了每一个家族的特性,又在内涵的技术要求中。我们鼓励用户端允许用户选择另外的字体作为通用字体。

serif

    CSS中所指的衬线字体带有结束笔划,突然或逐渐的结束,或实际的衬线结束(包括平板结束)。衬线字体通常是变宽的。它们要比'sans-serif'通用字体家族中的字体更明显地显示粗与细的笔划。CSS使用术语'serif'来泛指任何一个脚本的字体,尽管对于一个特定的脚本来说,其它名字可能更加熟悉,如Mincho(日文),Sung或Song(中文),Totum或Kodig(朝鲜语)。任何如此描述的字体都可以用来代表通用的'serif'家族。

    符合该描述的字体的例子有:

拉丁字体 Times New Roman,Bodoni,Garamond,Minion Web,ITC Stone Serif,MS Georgia,Bitstream Cyberbit
希腊字体 Bitstream Cyberbit
Cyrillic字体 Adobe Minion Cyrillic,Excelcior Cyrillic Upright,Monotype Albion 70,Bitstream Cyberbit,ER Bukinst
希泊来字体 New Peninim,Raanana,Bitstream Cyberbit
日文字体 Ryumin Light-KL,Kyokasho ICA,Futo Min A101
阿拉伯字体 Bitstream Cyberbit
Cherokee字体 Lo Cicero Cherokee

sans-serif

    CSS中所指的无衬线字体的结束是平的——没有突变,交叉笔划,或其它修饰。无衬线字体通常是变宽的。和'serif'家族相比,它们的粗细笔划的变化不那么大。CSS使用术语'sans-serif'来泛指任何一个脚本的字体,尽管对于一个特定的字体来说,其它名字可能更加熟悉,如Gothic(日文),Kai(中文)或Pathang(朝鲜语)。任何如此描述的字体都可以用来代表通用的'sans-serif'家族。

    符合该描述的字体的例子有:

拉丁字体 MS Trebuchet,ITC Avant Garde Gothic,MS Arial,MS Verdana,Univers,Futura,ITC Stone Sans,Gill Sans,Akzidenz Grotesk,Helvetica
希腊字体 Attika,Typiko New Era,MS Tahoma,Monotype Gill Sans 571,Helvetica Greek
Cyrillic字体 Helvetica Cyrillic,ER Univers,Lucida Sans Unicode,Bastion
希伯来字体 Arial Hebrew。MS Tahoma
日文字体 Shin Go,Heisei Kaku Gothic W5
阿拉伯字体 MS Tahoma

cursive

    CSS中所指的草体通常除了斜的字型外,还包括联笔或其它草体的特征。字型部分或完全相连,看起来的结果更像是用手写笔或刷子书写,而不是印刷出来。有些语言的字体,如阿拉伯文,几乎总是草写的。CSS使用术语'cursive'来泛指任何一个脚本的字体,尽管其它名字,如Chancery,Brush,Swing和Script也用在字体名中。

    符合该描述的字体的例子有:

拉丁字体 Caflisch Script,Adobe Poetica,Sanvito,Ex Ponto,Snell Roundhand,Zapf-Chancery
Cyrillic字体 ER Architekt
希伯来字体 Corsiva
Arabic字体 DecoType Naskh,Monotype Urdu 507

fantasy

    CSS中所指的奇异字体主要是装饰性的,但是还保持了字符的呈现(与之相对的Pi或Picture字体并不表示字母)。例如:

拉丁字体 Alpha Geometrique,Critter,Cottonwood,FB Reactor,Studz

monospace

    一个等宽字体的唯一标准就是所有的字型的宽度是一样的。(这使得某些脚本,如阿拉伯文看起来很特别。)效果如同一个手动打字机,通常用来显示计算机代码的例子:

    符合该描述的字体的例子有:
拉丁字体 Courier,MS Courier New,Prestige,Everson Mono
希腊字体 MS Courier New,Everson Mono
Cyrillic字体 ER Kurier,Everson Mono
日文字体 Osaka Monospaced
Cherokee字体 Everson Mono

15.3 字体选择

    CSS2字体机制的第二阶段牵涉到用户端根据作者指定的字体属性,可用字体等来选择字体。字体匹配算法的细节在下面给出。

    可能的字体选择行为有四种:名字匹配,智能匹配,综合和下载。

字体名字匹配
在这种情况下,用户端使用一个存在的、可获得的、与要求的字体具有相同的家族名的字体。(注意,如果文档作者使用的字体和客户系统的字体来自不同的厂家,它们的呈现和尺度不一定匹配。)匹配信息局限于CSS字体属性,包括家族名。这是CSS1使用的唯一方法。
智能字体匹配
在这种情况下,用户端使用一个存在的、可获得的、与要求的字体具有最接近的呈现匹配的字体。(注意,尺度不一定完全匹配。匹配信息包括字体类型的信息(文本或符号),衬线的特性,重量,大写高度,x高度,提升,下沉,倾斜等。
字体综合
在这种情况下,用户端创建一个字体,不仅在呈现上和要求的字体接近,而且匹配它的尺度。综合信息包括匹配信息,通常比某些匹配情况会要求更精确的参数值。特别地,综合要求精确的宽度尺度、字符到字型的替换以及在需要保留指定字体的布局特征时的定位信息。
字体下载
最后,用户端从网络上获得一个字体。该过程和为了显示当前文档而在网络上获得图形,声音或小应用程序相似。类似地,在页面呈现之前会引起一定的延迟。

    渐进渲染是下载和另外一个方法的组合;它先提供一个临时的替换字体(使用名字匹配,智能匹配或综合),因此在要求的字体下载时,可以先阅读内容。一旦真正的字体下载完毕,它替换了临时字体,当然希望不要再重新排列内容。

    注意。渐进渲染要求字体的尺度信息以避免实际的字体下载完毕并渲染时要重新对内容进行布局。这一尺度信息在一个文档中对一个字体最多指定一次。

15.3.1 字体描述和@font-face

    字体描述在作者的字体要求和字体数据(用来格式化文本或及渲染字符所对应的抽象字型的数据——实际的可缩放的轮廓或点阵图)间提供了一个桥梁。字体由样式表属性引用

    字体描述添加到字体数据库中并用来选择相关的字体数据。字体描述包含描述子如字体数据在网络上的位置,以及该字体数据的特征化。字体描述子也用来匹配样式表字体属性和特定的字体数据。字体描述的详细程度可以从仅有字体名字到包括字型宽度的列表。

    字体描述子可以被划分为三类:

  1. 提供CSS字体用法和字体描述间的连接(和相对应的CSS字体属性具有相同的名称),
  2. 字体数据位置的URI,
  3. 进一步描述字体的特征,提供字体描述和字体数据间的连接。

    所有的描述的指定都通过一个@font-face@规则。一般的形式为:

    @font-face { <font-description> }

    其中,<font-description>的形式为:

描述子:值;
描述子:值;
[...]
描述子:值;

    每一个@font-face规则为每一个字体描述子指定一个值,或者是隐式的,或者是显式的。规则中没有显式指定值的描述子取值为本规范中列出的初始值。这些描述子只适用于定义它们的@font-face规则的上下文中,并不适用于文档语言元素。因此,没有什么注释说明这些描述子适用于什么元素,也没有指出这些值是否可以由子元素继承。

    可用的字体选择子的描述见本规范稍后的章节。

    例如,这里定义了字体'Robson Celtic',并在HTML文档中的样式表中得到引用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
  <HEAD>
    <TITLE>Font test</TITLE>
    <STYLE TYPE="text/css" MEDIA="screen, print">
      @font-face {
        font-family: "Robson Celtic";
        src: url("http://site/fonts/rob-celt")
      }
      H1 { font-family: "Robson Celtic", serif }
    </STYLE>
  </HEAD>
  <BODY>
    <H1> This heading is displayed using Robson Celtic</H1>
  </BODY>
</HTML>

    在STYLE元素中的样式表包含一个CSS规则,将所有的H1元素设置为使用'Robson Celtic'字体家族。

    CSS1的实现将搜索客户端以找到一个字体,其家族名及其它属性匹配'Robson Celtic',如果它搜索失败,它将使用用户端指定的备用衬线字体(该字体总是得到定义并存在的)。

    实现CSS2的用户端将首先检查@font-face规则,在其中寻找定义了'Robson Celtic'的字体描述。该例中包含了这样一个匹配的规则。虽然该规则并不包括很多字体数据,它包含了一个URI指出哪里可以得到该字体并渲染该文档。下载的字体不可以被其它应用所使用。如果找不到匹配的@font-face,用户端将与实现CSS1的用户端一样进行匹配。

    注意,如果字体'Robson Celtic'已经安装在客户系统上,这将使用户端根据在字体匹配算法中描述的那样,在字体数据库中为安装的拷贝增加一个项。在上例中,安装的拷贝将先于可下载的字体得到匹配。

    CSS1实现并不理解@font-face规则,将发现开花括号并继续忽略直到匹配的闭花括号。该@规则与CSS的向下兼容的解析规则要求相一致。解析器可以忽略这些规则而不出错。

    将字体描述子从字体数据中分离有一个超出能够进行字体选择和/或替换的好处。字体描述子的数据保护和复制限制比全部的字体数据要弱。因此,可以将字体定义安装在当地,或至少在当地的缓存中(如果它出现在一个经常被引用的样式表中);这样,对于每一个命名的字体,就不需要多于一次地要求获得完整的字体定义。

    如果一个字体描述子重复出现,最后一个出现的描述子胜出,而其它的必须被忽略。

    同样的,任何用户端无法识别或无用的描述子必须被忽略。将来版本的CSS可能允许附加的描述子,以 获得更好的字体替换,匹配或综合。

15.3.2 选择字体的描述子'font-family''font-style''font-variant''font-weight''font-stretch'以及'font-size'

    下面的描述子和相对应的CSS2字体属性的名称相同,取值为单一值或以逗号分割的值的列表。

    除非明确说明,列表内的值和相对应的CSS2属性的值相同。如果只有一个值,那个值就是一定要被匹配的一个值。如果有一个列表,任何一个列表项都构成一个匹配。如果@font-face中省略了描述子,则使用该描述子的初始值。

'font-family'(描述子)
值:  [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]*
初始值:  取决于用户端
媒介:  图形

    这是一个字体的字体家族名的描述子。取值和'font-family'属性一样。

'font-style'(描述子)
值:  all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]*
初始值:  all
媒介:  图形

    这是字体样式的描述子,取值和'font-style'属性一样,只是它还接受逗号分割的列表。

'font-variant'(描述子)
值:  [normal | small-caps] [,[normal | small-caps]]*
初始值:  normal
媒介:  图形

    它是字体是否为小型大写字母变体的CSS表示。它的取值和'font-variant'属性一样,只是它还接受逗号分割的列表。

    注意。Cyrillicpryamoĭ字型可能标记'font-variant'为小型大写字母,这是为了与拉丁字型保持更好的一致性(kursiv字型标记'font-style'为斜体的原因也是如此)。

'font-weight'(描述子)
值:  all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]*
初始值:  all
媒介:  图形

    这是一个字型相对同一字体家族中其它字型的重量的描述子。它的取值和'font-weight'属性一样,但是有三个例外:

  1. 不允许相对关键字(bolder,lighter)。
  2. 对于包含多个重量的字体,允许逗号分割的值的列表。
  3. 允许一个额外的关键字,'all'。它意味着该字体匹配所有可能的重量;或者是因为它包含多个重量,或者是因为该字型只有一个重量。
'font-stretch'(描述子)
值:  all | [ normal | ultra-condensed | extra-condensed |condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed |condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]*
初始值:  normal
媒介:  图形

    这是一个字型相对于同一字体家族中其它字型的压缩或扩展性质的CSS描述。它的取值和'font-stretch'属性一样,但是:

'font-size'(描述子)
值:  all | <length> [, <length>]*
初始值:  all
媒介值:  图形

    这是字体所提供的字体尺寸的描述子。只允许使用绝对长度单位,这一点和'font-size'属性不同,后者允许相对和绝对的长度和尺寸。该描述子允许一个逗号分割的绝对长度列表。

    初始值'all'适用于大多数可缩放字体,因此该描述子主要用在点阵字体的@font-face规则,或者将可缩放字体栅格化为几个字体尺寸的可用范围。

15.3.3 字体数据限制的描述子'unicode-range'

    下面的描述子在字体定义中是可选的,但是可以用来避免检查或下载一个字体,而它并不包括渲染一个特定字符的足够的字型。

'unicode-range'(描述子)
值:  <urange> [, <urange>]*
初始值:  U+0-7FFFFFFF
媒介:  图形

    该描述子描述了该字体包含的ISO 10646字符范围

    <urange>的值表示为十六进制数,加上前缀"U+",对应于ISO 10646中的字符编码位置[ISO10646])。

    例如,U+05D1是ISO 10646字符'Hebrew letter bet'。对于超出基本多语言平台(BMP)的数值,需要加入额外的表示平台号的前导数字,如:U+A1234是在平台10上十六进制编码位置为1234的字符。书写的时候,没有字符分配到BMP之外。前导零(例如0000004D)是合法的,但不是必须的。

    该描述子的初始值不仅包含整个BMP(将表示为U+0-FFFF),而且包含ISO 10646的整个内容。因此,初始值就意味着该字体可以包含ISO 10646中任意位置字符的字型。给'unicode-range'指定一个值将提供信息,通过声明一个限制的范围,在其中可能有显示字符用的字型,而使搜索更有效。超出该范围的字符不用在该字体中搜索。

    该描述子的值可以以任意数量的数字书写。对于单个数字,字符'?'代表“任意值”,它生成了一个字符定位的范围。因此,使用一个数字

unicode-range: U+20A7
没有通配符——它表示单一字符的定位(西班牙货币比塞塔的符号)
unicode-range: U+215?
一个通配符,包含范围为2150到215F(分数)
unicode-range: U+00??
两个通配符,包含范围为0000到00FF(Latin-1)
unicode-range: U+E??
两个通配符,包含范围为0E00到0EFF(老挝文字)

    本格式中的一对数字可以用连字号结合来表示更大的范围。例如:

unicode-range: U+AC00-D7FF
范围是AC00到D7FF(Hangul Syllables区域)

    多重、不连续的区域可以通过逗号分割来指定。和CSS中其它逗号分割的字体一样,任何逗号之前或之后的空白将被忽略。例如:

unicode-range: U+370-3FF, U+1F??
包含范围是0370到03FF (当代希腊语)加上1F00到01FFF (古希腊语)。
unicode-range: U+3000-303F, U+3100-312F, U+32??, U+33??, U+4E00-9FFF, U+F9000-FAFF, U+FE30-FE4F
在细致方面这是一个很差的例子,它非常精确地指出本字体(非常大)只包含ISO 10646中的中文字符,而不包含任何单独的日文或朝鲜文字。该范围是3000到303F(CJK符号和标点),加上3100到312F(拼音符号),加上3200到32FF(内含的CJK字母和月份),加上3300到33FF(CJK兼容区域),加上4E00到9FFF(CJK统一表意文字),加上F900到FAFF(CJK兼容表意文字),加上FE30到FE4F(CJK兼容表单)。

    一个中文字体的通常的呈现更可能是:

    unicode-range: U+3000-33FF, U+4E00-9FFF

unicode-range: U+11E00-121FF
该字体包含了建议的阿兹台克象形文字的注册,包含范围是平台1中的1E00到21FF。
unicode-range: U+1A00-1A1F
该字体包含了建议的爱尔兰Ogham文字的注册,范围是1A00到1A1F。

15.3.4 数值描述子'units-per-em'

    下面的描述子指定了每一个em所包含的“单位”数量;这些单位可以被其它描述子使用来表示各种长度,因此如果其它的描述子依赖于'units-per-em',它就是必须的。

'units-per-em'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是以全身长方块来协调单位,即布置字型的设计栅格的尺寸的描述子。

15.3.5 参考描述子'src'

    在参考实际的字体数据(或者是可下载的,或者是安装在当地的)时,需要该描述子。

'src'(描述子)
值:  [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]*
初始值:  未定义
媒介:  图形

    这是一个外部引用和/或当地安装的字体名称的以逗号分割的优先级列表。外部引用指向网络上的字体数据。如果要下载网络字体就需要该描述子。字体资源可以是源字体的一个子集,例如它可能只包括当前页面或页面集所需要的字型。

    外部引用包含一个URI,后跟一个可选的关于在那个URI找到的字体资源格式的提示,而该信息将由用户使用以免连接指向的字体格式是无法使用的。和其它超文本引用类似,可能有其它格式可用,但是用户对于那里有些什么有了一个更好的概念,也比从URI中文件名中提取扩展名的方法更可靠。

    格式提示包含一个逗号分割的列表,其中是一些格式字符串,表示众所周知的字体格式。用户端将识别这些名字中它支持的字体格式,并避免下载它不能识别的格式的字体。

    本规范定义、并可能由不同平台实现使用的格式的一个格式字符串的初始列表为:

字符串字体格式通常的后缀例子
"truedoc-pfr"TrueDoc™ Portable Font Resource .pfr
"embedded-opentype"Embedded OpenType .eot
"type-1"PostScript™ Type 1 .pfb, .pfa
"truetype"TrueType .ttf
"opentype"OpenType, including TrueType Open .ttf
"truetype-gx"TrueType with GX extensions
"speedo"Speedo
"intellifont"Intellifont

    和CSS中其它的URI一样,这里的URI可以是部分的。在这时,它相对于包含 @font-face的样式表的位置而得到定位。

    本地安装的<font-face-name>是一个当地安装的字体的全名。字体全名是操作系统返回的字体名,也很可能被用在读者的样式表、浏览器缺省样式表或者也可能在内部网上的作者样式表。诸如粗体、斜体及下划线等装饰通常用来在一个字体家族中对不同的字型加以区分。字体全名的更多信息请见下文。

    <font-face-name>的表示是字体的全名。由于它可能包含任意字符,包括空格和标点,因此全名必须包含在引号中,并必须以"local("和")"包围。

例子:

src: url("http://foo/bar")
一个完整的URI,这里没有字体格式的信息。
src: local("BT Century 751 No. 2 Semi Bold Italic")
引用了一个当地安装字体的特定字型。
src: url("../fonts/bar") format("truedoc-pfr")
一个部分URI,包含字体的格式为TrueDoc格式。
src: url("http://cgi-bin/bar?stuff") format("opentype", "intellifont")
一个完整的URI,在这里指向一个脚本,它可以产生两种不同的格式:OpenType和Intellifont。
src: local("T-26 Typeka Mix"), url("http://site/magda-extra") format("type-1")
给出了两个选择,第一个是当地安装的字体,第二个是可下载的字体,格式为Type 1。

    对当地安装字体的访问是通过<font-face-name>。字体家族名并不是真正单一的,也不是真正地与平台或字体格式无关,但是目前它是确定当地安装字体数据的最好的方法。通过提供需要的字型补充的说明,使用字体家族名可以更加精确。这可以通过指明ISO 10646字符定位范围来完成,而该字体提供了部分的字型(参见'unicode-range')。

15.3.6 匹配描述子'panose-1''stemv''stemh''slope''cap-height''x-height''ascent''descent'

    这些描述子对于CSS2定义是可选的,但可以被用来实现作者希望的智能字体匹配或字体尺寸调整。

'panose-1'(描述子)
值:  [<integer>]{10}
初始值:  0 0 0 0 0 0 0 0 0 0
媒介:  图形

    这是一个Panose-1数字的描述子,包含十个十进制整数,以空白分割。该描述子不允许逗号分割的列表,因为Panose-1系统能够表明一段范围的值得到匹配。对于每一个PANOSE数字,初始值为零,表示“任何”;如果使用了这个值,所有的字体将匹配Panose数字。对于拉丁字体,强烈推荐使用Panose-1描述子。更多的细节,请参见附录C

'stemv'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是一个字体的垂直主字母宽度描述子。如果取值为未定义,则该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。

'stemh'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是一个字体的水平主字母宽度的描述子。如果取值为未定义,则该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。

'slope'(描述子)
值:  <number>
初始值:  0
媒介:  图形

    这是一个字体的垂直笔划角度的描述子。

'cap-height'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是一个字体的大写字型的高度数量的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。

'x-height'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是一个字体的小写字型的高度的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。在使用'font-size-adjust'属性时,该描述子非常有用。因为候选字体z值的计算需要字体尺寸和x-height;因此我们推荐包含该描述子。

'ascent'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是一个字体的最大的非提升字符的高度的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。

'descent'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是一个字体的最大的非提升字符的深度的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。

15.3.7 综合描述子'widths''bbox''definition-src'

    字体的综合意味着,在最低程度上,要匹配指定字体的宽度量度。因此,对于综合来说,这一量度信息必须提供。类似地,渐进渲染也要求宽度量度以避免在实际的字体装载后,对内容进行重排列。尽管下面的描述子对于CSS2定义而言是可选的,在作者要求综合(或无重排的渐进渲染)时,某些渲染子还是必须的。如果实际的字体变为可用,它将替换原来的代替者。这里展示的任何一个描述子都将用来提供一个更好或更快的接近需要的字体的方法。

    这些描述子中,最重要的是'widths'描述子和'bbox',一旦实际的字体可用时,它们被用来防止文本的重排。另外,在匹配描述子中的描述子也可以用来提供一个更好的实际字体显现的综合。

'widths'(描述子)
值:  [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+]
初始值:  未定义
媒介:  图形

    这是一个字型宽度的描述子。取值是一个逗号分割的列表(<urange>值,后接一个或多个字型宽度)。如果使用该选择子,则必须同时使用'units-per-em'选择子。

    如果省略掉<urange>,则假定它为U+0-7FFFFFFF,包含了所有的字符和它们的字型。如果没有给出足够的字型宽度,列表中的最后一个将被复制以填充整个范围。如果给出了太多的宽度,多余的将被忽略

例子:

    例如:

widths: U+4E00-4E1F 1736 1874 1692
widths: U+1A?? 1490, U+215? 1473 1838 1927 1684 1356 1792 
    1815 1848 1870 1492 1715 1745 1584 1992 1978 1770

    在第一个例子中,给出了32个字符的范围,从4E00到4E1F。对应于第一个字符(4E00)的字型宽度为1736,第二个宽度为1874,而第三个为1692。由于没有给出足够的宽度,最后的宽度将被复制以填充指定范围的剩余部分。第二个例子为整个范围256个字型设置了单一宽度为1490,然后为范围16个字型显式地设置了宽度。

    该描述子不能描述对应于一个字符的多个字型,或多个字符的捆绑。因此,该描述子只能用来不包括上下文相关格式或强迫的捆绑的脚本。尽管如此,该描述子对这些情形还是有用的。要求字符到字型是一到多或多到多映射的脚本目前不能使用该描述子来达到字体综合,虽然它们仍然可以使用字体下载或智能匹配。

'bbox'(描述子)
值:  <number>, <number>, <number>, <number>
初始值:  未定义
媒介:  图形

    这是一个字体的最大边界控制框的描述子。取值是一个四个数字,以逗号分割的列表,依次指定了完整字体的边界控制框的左下角x,左下角y,右上角x,右上角y的坐标。

'definition-src'(描述子)
值:  <uri>
初始值:  未定义
媒介:  图形

    字体描述子或者是在样式表中的字体定义中,或在一个单独的由URI表示的字体定义资源中提供。后一种方法在多个样式表引用同一字体时,将降低网络交通。

15.3.8 对齐描述子'baseline''centerline''mathline''topline'

    这些可选的描述子用来对齐不同脚本之间的排列。

'baseline'(描述子)
值:  <number>
初始值:  0
媒介:  图形

    这是字体的下基准线的描述子。如果该描述子取值为非缺省值(非零),必须同时使用'units-per-em'选择子。

'centerline'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是字体的中心基准线的描述子。如果取值为未定义,用户端可以采用不同的方法,如取提升和下降的值的中点。如果使用该描述子,则必须同时使用'units-per-em'描述子。

'mathline'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是字体的数学基准线的描述子。如果未定义,用户端可以用中心基准线。如果使用该选择子,则必须同时使用'units-per-em'描述子。

'topline'(描述子)
值:  <number>
初始值:  未定义
媒介:  图形

    这是字体的顶基准线的描述子。如果未定义,用户端可以采用一个近似值,如提升值。如果使用该选择子,则必须同时使用'units-per-em'选择子。

15.3.9 示例

例子:

    给出如下的字体列表:
Swiss 721 light light & light italic
Swiss 721 roman, bold, italic, bold italic
Swiss 721 medium medium & medium italic
Swiss 721 heavy heavy & heavy italic
Swiss 721 black black, black italic, & black #2
Swiss 721 Condensed roman, bold, italic, bold italic
Swiss 721 Expanded roman, bold, italic, bold italic

    可以使用如下的字体描述使它们能够下载。

@font-face {
    font-family: "Swiss 721";
    src: url("swiss721lt.pfr"); /* Swiss 721 light */
    font-style: normal, italic;
    font-weight: 200;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721.pfr"); /* The regular Swiss 721 */
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721md.pfr"); /* Swiss 721 medium */
    font-style: normal, italic;
    font-weight: 500;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721hvy.pfr"); /* Swiss 721 heavy */
    font-style: normal, italic;
    font-weight: 700;
}
@font-face {
    font-family: "Swiss 721";
    src: url("swiss721blk.pfr"); /* Swiss 721 black */
    font-style: normal, italic;
    font-weight: 800,900; /* 注意,很有趣的一个问题是重量为900的斜体不存在 */
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The condensed Swiss 721 */
    font-stretch: condensed;
}
@font-face {
    font-family: "Swiss 721";
    src: url(swiss721.pfr); /* The expanded Swiss 721 */
    font-stretch: expanded;
}

15.4 字体的特征

15.4.1 字体特征简介

    本节中列出了对于客户端字体的匹配、综合和为访问网络的异种平台而进行的下载来说有用的字体特征。如果任何需要在网络上使用字体的媒介,不采用将字体数据物理地嵌套在媒介中的方法,这些数据就很有用。

    这些特征用来表征字体。它们不仅仅是CSS或样式表所特有的。CSS中,每一个特征由一个字体描述子描述。这些特征也可以映射到VRML节点,或CGM应用结构,或Java API,或另外的样式表语言。一个由媒介获取并存放在缓存中的字体可以被另外一个媒介重用。因此如果一个共同的字体特征系统被不同的媒介使用,就节省了下载时间和网络带宽。

    这样的媒介例子的一个非穷举的列表包括:

15.4.2 字体的全名

    这是一个特定字体家族字型的全名。通常它包括一系列非标准的文本修饰或装饰,附加在字体家族名后面。它也可以包括一个制造名或缩写,通常附加在字体家族名前面。它只用来引用当地安装的字体,因为被修饰的名字的格式随平台的不同而不同。它必须被引号包围。

    例如,TrueType字体的字体家族名和PostScript名就可能在空格、标点或某些单词的缩写方面有所不同(例如,为了符合不同系统或打印机解释器对于名字长度的限制)。例如,PostScript名字中不允许空白,但是空白在字体全名中很常见。TrueType名字可以同时包含PostScript名字,后者不包含空格。

    字体定义的名字很重要,因为它是任何当地安装的字体的连接。考虑到对平台和应用的非依赖性,名字要很健壮。基于这个理由,名字应该是与应用或语言无关的。

    理想的解决方法是是取一个能唯一标识每一个字体数据集合的名字。这样的名字在目前的字体数据的应用实践中并不存在。具有相同字型名的字体可以因若干个描述子而不同。某些描述子,如字体中字型的不同补充,如果需要的字型在字体内的话,可能并不那么重要。另外的描述子,如不同的宽度量度,使具有相同名字的字体互不兼容。看上去定义这样的一个规则是不可能的:它总是能发现不兼容性,但是不禁止使用与给定名字的字体数据完全吻合的当地拷贝。因此,只有ISO 10646范围内的字符可以满足字体字型名的匹配。

    鉴于字体定义中字体字型名的主要目的是允许用户端确定什么时候存在一个指定的字体数据的当地拷贝,该名字必须是一个存在于字体数据所有合法拷贝中的名字。否则,由于当地拷贝无法匹配,将引起不必要的网络交通。

15.4.3 以全身长方块来协调单位

    某些值,如宽度量度,的表示是相对于一个抽象的方块的,该方块的高度等于同一类型尺寸行之间应该有的距离。该方块称为em方块,它是定义字型轮廓的设计栅格。该描述子的值指定了该EM方块被分割为多少个单位。比较通常的例子有250(Intellifont),1000(Type 1)和2048(TrueType,TrueType GX及OpenType)。

    如果不指定这个值,将无法知道任何字体量度的含义。例如,一个字体的小写字型高度为450;另一个较小的字体却为890!实际上这些数字是分数;第一个字体为450/1000而第二个为890/2048,确实是小了一些。

15.4.4 中心基准线

    给出了em方块中中心基准线的位置。中心基准线用于表意文字脚本的对齐,如同拉丁,希腊和Cyrillic脚本中用的下基准线。

15.4.5 字体编码

    不管是显式地还是隐式地,每一个字体都有一个相关联的表,即字体编码表,它指出每一个字型表示的字符。该表格也被引用为编码向量

    事实上,很多字体包含若干个字型来代表同一字符。到底使用哪个字型或者取决于语言规则,或者取决于设计者的偏好。

    例如在阿拉伯文字中,所有的字母有四个(两个)不同的形状,取决于该字符是用在单词的开头,单词的中间,单词的结尾或独立使用。在所有的情况下,字符是同一个,因此在源文档中只有一个字符,但是在打印时,应该是不同的。

    还有些字体让图形设计者从提供的各个备选形状中来进行选择。不幸的是,CSS2还未提供这样的方法来选择这些备选形状。目前,它总是从这些字体中选择缺省的形状。

15.4.6 字体家族名

    指定了字体字型名中的家族名部分。例如,Helvetica-Bold的家族名为Helvetica,而ITC Stone Serif Semibold Italic的家族名是ITC Stone Serif。有些系统将和压缩或扩展字型相关的装饰理解为家族名的一部分。

15.4.7 字型宽度

    这是设计栅格上对应于每一个字符的字型宽度的列表。该列表按ISO 10646编码排序。如果多个字型映射到同一个字符,或有强制的合并时,宽度的指定并没有什么用。

15.4.8 水平主字母宽度

    该值是指字体中主导的主字母的宽度。可能会有两个或多个设计的宽度。例如,罗马字符中主要的垂直主字母和窄的主字母就不同(带衬线的"M"和"N"),而且同一字体中大写和小写字母的宽度可能不同。同样地,或者由于设计或者由于错误,所有主字母的宽度可能略有不同。

15.4.9 大写字型的高度

    该数值是拉丁、希腊和Cyrillic脚本的平直大写字母从下基准线到顶的y坐标量度。如果字体不包含这些脚本中的字型,该描述子不是必须的。

15.4.10 小写字型的高度

    该数值是拉丁、希腊和Cyrillic脚本的非提升的小写字母从下基准线到顶的y坐标量度。使用平顶的字母,忽略任何光学修正区。通常它用来作为一个小写高度和大写高度的比例,来比较字体家族。

    Illustration of x-height

    如果字体中不包括这些脚本中的任何字型,该描述子没有用。由于小写字母和大写字母的高度通常以比例的形式表示来比较不同的字体,对于单制脚本,如希伯来文,将大小写高度设置为同一值可能有用,因为对于拉丁文和希伯来文的混合,希伯来文字符通常设置的高度是在拉丁字体的大写和小写高度中间。

    Height of Hebrew characters

15.4.11 下基准线

    给出了下基准线在em方块中的位置。下基准线被拉丁、希腊和Cyrillic脚本用作对齐,就象顶基准线被Sanscrit派生的脚本用来对齐一样。

15.4.12 数学基准线

    给出了数学基准线在em方块中的位置。数学基准线用来数学符号的对齐,如同下基准线用来拉丁、希腊和Cyrillic脚本的对齐一样。

15.4.13 最大边界控制框

    如果字体中所有的字型放置时起点重合,然后绘出,包含这个形状的最小的长方形就是最大边界控制框。

    如果一个动态可下载的字体的产生是通过一个父字体的子集,那么bbox应该用父字体的那一个。

15.4.14 最大的非提升字符的高度

    em方块的这一量度,是从基线到任何字型达到的最高点,除去任何提升或重音标记。

    Diagram showing several glyphs and the maximum unaccented height

15.4.15 最大的非提升字符的深度

    em方块的这一量度,是从基线到任何字型达到的最低点,除去任何下沉或擦音标记。

    Diagram showing several glyphs and the maximum unaccented depth

15.4.16 Panose-1中的数字

    Panose-1是一个工业标准的TrueType字体分类和匹配技术。PANOSE系统包含10个数字的集合,对拉丁字型的关键属性进行了分类,一个产生这些数字的分类步骤,以及Mapper软件在给定的字型集中确定最接近的可能的字体匹配。系统可以在修改后,使用在希腊和Cyrillic上,但是不适合于单制和表意脚本(希伯来,亚美尼亚,阿拉伯,中文/日文/韩文)。

15.4.17 ISO 10646的字符范围

    这里描述了相对于ISO 10646(Unicode)规范的字体的的字型系统。由于这一字型系统是稀疏的(即大部分字体并不覆盖ISO 10646的全体),这一描述子列出了一些确实包含了字型的字体的块或范围(但是不保证全部覆盖),并用来剔除那些不合适的字体(即一个不包含所需要的字型的字体)。它并不肯定地表示字体必然包含所需的字型,只是说该字体值得下载并在其中寻找字体。参见[ISO10646]以了解其他帮助文档的信息。

    这一方法可以扩展以包含Unicode字符将来的分配,而不用改变语法也不用违反现有的内容。

    如果字体格式不管是显式地或隐式地都没有包含这一信息,字体还可以使用这一特性,但是这一取值必须由文档或样式表的作者给出。

    脚本中还可以有其它的分类,如Monotype系统(参见[MONOTYPE])和提议中的ISO脚本系统。这些并不是可以扩展的。

    基于这一原因,本规范中使用了ISO 10646字符范围中可以为某一特定字体呈现的字型系统分类。这一系统可以扩展以包含将来的分配。

15.4.18 顶基准线

    它给出了em方块中顶基准线的位置。从Sanscrit派生的脚本用它作为对齐线,如同拉丁、希腊和Cyrillic脚本用下基准线作为对齐线一样。

15.4.19 垂直主字母宽度

    这是字型垂直(或近乎垂直)主干的宽度。该信息通常和Hinting(一种屏幕显示优化技术——译者注)相关联,在某些字体格式中可能不可以直接存取。测量数值应该是字体中占主导的垂直主干的宽度,因为垂直主干可能有不同的组合(例如,在大写的M和N中,有一个主要的,一个“轻”点的)。

15.4.20 垂直笔划角度

    这是字体中主导垂直笔划与垂直方向的倾斜角度(逆时针方向为正)。对于向右倾斜的字体——几乎所有的字体都向右倾斜——该数值是负数。该描述子适用于斜体,倾斜体,手写体,以及一般而言,任何垂直笔划不是精确垂直的字体。当然,该数值不为零本身不意味着该字体就是斜体字体。

15.5 字体匹配算法

    本规范扩展了CSS1规范中给出的算法。当作者和用户的样式表不包含任何@font-face规则时,该算法将降解到CSS1规范中给出的算法。

    将描述子匹配到字体必须非常小心。描述子的匹配顺序被精确的定义,目的是保证这一匹配过程的结果能在所有UA中尽可能保持一致——前提当然是每个UA都安装有相同的库和字体描述。该算法当然可以被优化,只要该优化算法的实现表现得准确地遵循着原始算法。

  1. 用户端创建(或读取)一个数据库,该数据库包含了一个UA知晓的所有字体的相关font-face描述子。如果有两个字体的描述子完全一致,那么其中一个字体就会被忽略。UA可能因为如下原因知晓一个字体:
  2. 对于一个给定的元素以及该元素中的每个字符,UA组合那些适用于该元素的字体特性。在特性集合中,UA使用'font-family'描述子来选择一个临时的字体家族。因此,在匹配其它描述子之前,家族名的匹配将必定成功。余下的特性将根据各自的匹配标准与字体家族比对。如果所有余下的特性都匹配,那么该字体家族就是匹配该给定元素的字体。
  3. 如果在步骤2中处理的'font-family'中没有匹配字体,实现了智能匹配的UA会继续检查其它的描述子,诸如x-height,字型宽度以及panose-1来确定一个不同的临时字体家族。如果所有余下的特性都匹配,那么该字体家族就是匹配该给定元素的字体。返回给CSS2特性的'font-family'描述子还是文档要求的字体家族,而不是智能匹配所返回的名字。如果UA没有实现智能匹配,那在这一步就是失败的。
  4. 如果在第3步中处理的'font-family'中没有找到匹配字体,实现了字体下载的UA会检查步骤2或3中确定的字体的'src'描述子来确定有可用的网络资源且其格式正确。如果所有余下的特性都匹配,那么该字体家族就是匹配该给定元素的字体,UA会尝试下载该字体资源。UA可以选择在下载时停止后续步骤,也可以选择在字体下载时继续下一步。没有实现字体下载、没有网络连接的UA、或用户选择禁止字体下载、请求的资源无效、下载的字体无法被使用的情况下,本步骤就是失败的。
  5. 如果在第3步中处理的'font-family'中没有找到匹配字体,实现了字体合成的UA会继续检查其它的描述子,诸如'x-height',字型宽度以及'panose-1'来确定一个另外的临时字体家族进行合成。如果所有余下的特性都匹配,那么该字体家族就是匹配该给定元素的字体。UA也可以开始该“虚构”字体的合成。如果UA不支持字体合成,本步骤就是失败的。
  6. 如果步骤3、4、5都失败,但是在字体集中还有备选的'font-family',那么以备选的'font-family'从步骤2开始重复这些步骤。
  7. 如果存在匹配的字体,但是不存在对应当前字符的字型,同时在字体集中还有备选的'font-family',那么以备选的'font-family'从步骤2开始重复这些步骤。'unicode-range'描述子可以用来快速摒除那些并不包含正确字型的字体。如果'unicode-range'描述子表明一个字体包含了正确范围内的字型,UA可以继续检查该字体是否包含那个特定字型。
  8. 在步骤2中如果选中的字体家族中没有字体,那么需要使用继承来的或UA相关的'font-family'值并重复步骤2,使用在该字体中能获得的最好的匹配。如果使用该字体不能显示某个特定字符,UA应该表示出一个字符并没有被显示(例如,使用“缺失字符”字型)。
  9. 实现渐进渲染的UA,并且它正下载字体时,一旦下载成功,会将下载的字体作为字体家族使用。如果下载的字体缺少某些字型,而临时的字体确实包含这些字型,那么对于这些字型不使用下载的字体,而继续使用临时字体。

     注意:上述的算法可以进行优化,以避免对每个字符都要重复访问CSS2特性。

    步骤2中,基于描述子的匹配规则如下:

  1. 'font-style'首先被尝试。'italic'满足的条件是:UA的字体数据库中有个字体标记有CSS关键字'italic'(首选)或'oblique'。否则数值必须精确匹配。除此外,font-style匹配失败。
  2. 接下来尝试的是'font-variant'。'normal'匹配未被标记为'small-caps'的字体;'small-caps'匹配:(1)标记为'small-caps'的字体;(2)小型大写字母是合成的字体;(3)字体中所有的小写字母被大写字母替换了的字体。小型大写字母字体可以通过将一般字体中大写字母缩小的方法来合成。
  3. 'font-weight'将继续被匹配,它永远不会失败。(参见下面的'font-weight'。)
  4. 'font-size'必须在UA特定的误差范围内匹配。(通常而言,可缩放字体的尺寸会圆整到最接近的的像素点,而点阵字体的误差范围最大可达20%。)进一步的计算,例如其它特性中的'em'值将基于实际使用的'font-size'而不是制定的值。

15.5.1 字体重量值到字体名的映射

    'font-weight'特性值以数值形式给出,其中值'400'(或'normal')对应了该字体的“一般”文字。与该字体相关联的重量名称一般会是Book, Regular, Roman, Normal或(有时)是Medium

    一个字体家族中其它重量名与数值重量的关联只是为了保持该家族中重量的顺序而已。用户端必须以某种方式来进行名称到数值的映射,并保持视觉上的合理顺序。与一个值对应的字体不可以比另一个和一个较小的值映射的字体显示得轻。一个用户端在字体家族中如何映射字体重量名到重量值并没有一定的保证。但是,如下的一些描述将启发我们在通常情况下这样的分配是如何进行的:

    并不保证对于每个'font-weight'值都有一个更深的字体;例如,有些字体只有普通和粗体,其它一些字体只有八种不同的字体重量。

    下面的两个例子显示了常见的映射。

    假定"Rattlesnake"家族中有四个重量,从浅到深依次是Regular/Medium/Bold/Heavy

font-weight映射的第一个例子
可用字体分配值填空
"Rattlesnake Regular" 400 100, 200, 300
"Rattlesnake Medium" 500
"Rattlesnake Bold" 700 600
"Rattlesnake Heavy" 800 900

    假定"Ice Prawn"家族中有六个重量:Book/Medium/Bold/Heavy/Black/ExtraBlack。注意,在本例中,用户端决定给"Example2 ExtraBlack"分配一个数值。

font-weight映射的第二个例子
可用字体分配值填空
"Ice Prawn Book" 400 100, 200, 300
"Ice Prawn Medium" 500
"Ice Prawn Bold" 700 600
"Ice Prawn Heavy" 800
"Ice Prawn Black" 900
"Ice Prawn ExtraBlack" (none)

15.5.2 字体匹配范例

范例:

    下面的例子定义了一个特定的字体Alabama Italic。Panose字体描述以及获得TrueType服务器字体的源URI均已提供。Font-weight和font-style描述子用来描述该字体。声明还表示,重量将匹配范围在300到500之间的任何要求。字体家族名是Alabama而经修饰的字体名是Alabama Italic。

@font-face {
  src: local("Alabama Italic"),
       url(http://www.fonts.org/A/alabama-italic) format("truetype");
  panose-1: 2 4 5 2 5 4 5 9 3 3;
  font-family: Alabama, serif;
  font-weight:   300, 400, 500;
  font-style:  italic, oblique;
}

范例:

    下一个例子定义了一个字体家族。提供了获得字体数据的单一URI。该数据将包含指明的字体的多个样式和重量。一旦其中之一的@font-face不再被引用,数据将存在于UA缓存中,以便其它使用相同URI的字体使用。

@font-face {
  src: local("Helvetica Medium"),
       url(http://www.fonts.org/sans/Helvetica_family) format("truedoc");
  font-family: "Helvetica";
  font-style: normal
}
@font-face {
  src: local("Helvetica Oblique"),
       url("http://www.fonts.org/sans/Helvetica_family") format("truedoc");
  font-family: "Helvetica";
  font-style: oblique;
  slope: -18
}

范例:

    下面的例子将三个物理字体分组到一个虚拟字体中并加以扩展。在每个情况下,经修饰的字体名在src描述子中给出,以便在当地安装了该字体时,该字体将被优先使用。第四个规则指向具有同样扩展的字体,但包含在一个单一来源中。

@font-face {
  font-family: Excelsior;
  src: local("Excelsior Roman"), url("http://site/er") format("intellifont");
  unicode-range: U+??; /* Latin-1 */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior EastA Roman"), url("http://site/ear") format("intellifont");
  unicode-range: U+100-220; /* Latin Extended A and B */
}
@font-face {
  font-family: Excelsior;
  src: local("Excelsior Cyrillic Upright"), url("http://site/ecr") format("intellifont");
  unicode-range: U+4??; /* Cyrillic */
}
@font-face {
  font-family: Excelsior;
  src: url("http://site/excels") format("truedoc");
  unicode-range: U+??,U+100-220,U+4??;
}

范例:

    下一个例子有可能在UA的缺省样式表中找到。通过映射到若干serif字体,它实现了CSS2通用字体家族serif。没有给出具体值是因为在可能的选择中它们是不同的。

@font-face {
  src: local("Palatino"),
	  local("Times New Roman"),
	  local("New York"),
	  local("Utopia"),
	  url("http://somewhere/free/font");
  font-family: serif;
  font-weight: 100, 200, 300, 400, 500;
  font-style: normal;
  font-variant: normal;
  font-size: all
}