目录
一旦文档的文本要可见地显示,字符(抽象信息元)必须被映射到抽象字型。一个或多个字符可以被一个或多个字型表示,可能是以内容相关的方式。一个字型是一个抽象字型的实际的艺术的体现,在某些印刷样式中,可能以轮廓或点阵图的形式画在屏幕或纸张上。一个字体是字型的一个集合,所有元素根据设计、尺寸、呈现及其他和整个集合相关联的属性,遵循相同的主题,还包括从字符到抽象字型的映射机制。
在实际地渲染一个字符前,图形用户端必须考虑如下事项:
在CSS1和CSS2中,作者通过一系列字体属性来指定字体的特征。
如果在客户端没有匹配的字体,用户端如何处理这些属性在CSS1到CSS2的升级中得到扩充。CSS1中,所有的字体都被假定在客户端系统中存在,并仅以名字为标记。候选的字体可以通过属性得到指定,但是如果超过了这一步,用户端没有任何方法提供别的字体给用户(即使用户端具备样式相似的字体),而只能提供通用的缺省字体。
CSS2改变了这一切,给予更多的自由使得:
CSS2改进了客户端的字体匹配,允许字体综合和渐进渲染,并允许字体从网络上下载。这些增强的能力被称为“网络字体”。
CSS2字体模型中,和CSS1中类似,每一个用户端有一个“字体数据库”的配置。CSS1引用该数据库,但是不能给出其中内容的细节。CSS2定义了数据库中的信息,并且允许样式表作者对其提供信息。一旦被要求以一个特定的字体显示一个字符,用户端首先在数据库中找到“最合适”的那个特定的字体(根据字体匹配算法)。一旦确定了一个字体,它或者在局部或者从网络上获得字体的数据,并使用那些字型来显示字符。
根据这个模型,我们将字体规范分为两个部分。第一部分讨论了字体说明机制,作者指定了他们希望使用的是什么字体。第二部分讨论了字体选择机制,客户的用户端确定并装载与作者的规定最合适的字体。
用户端如何构筑字体数据库在本规范讨论之外,因为数据库的实现依赖于 操作系统,窗口系统,客户端等诸多因素。
CSS字体机制的第一阶段牵涉到样式表的作者如何指定用户端应该使用哪一个字体。一开始,看上去最明显的指定一个字体的方法是通过字体的名字,一个单字符串——看起来被分割为独立的部分;例如"BT Swiss 721 Heavy Italic"。
不幸的是,不存在一个完美定义并为大众接受的分类,来基于名字对字体进行划分,而且,适用于一个字体家族名的术语对于其它字体可能就不合适。例如,术语'italic'通常被用来标记倾斜的文本,但是倾斜的文本也可能被标记为Oblique,Slanted,Incline,Cursive或Kursiv。类似的,字体名通常包含描述字体“重量”的术语。这些名字的最根本的角色是在单一的字体家族中对不同的黑度加以区别。这些重量名并没有广泛接受的含义,其用法也差异颇多。例如,你可能认为一个字体被标记为黑体,但是它也可能被描述为Regular,Roman,Book,Medium,Semi-或Demi-Bold,Bold,或Black,这完全取决于设计字体的“正常”字体有多黑。
缺乏命名的系统性,使得通常情况下,生成一个修改过的字体名,如更黑一点这样的特定变化,成为不可能。
基于这一原因,CSS使用一种不同的模型。请求字体不再通过一个单一的字体名,而是通过设置一系列的字体属性。这些属性值构成了用户端字体选择机制的基础。字体属性可以被个别修改,例如,增加黑度。新的字体属性值的集合再被用来从字体数据库中选择字体。这样做的结果是增加了样式表的作者和实现者的规范性和健壮性。
CSS2根据如下特性来指定字体:
所有的属性,除了'font-size','em'和'ex'长度值将基于当前元素的字体大小。对于'font-size',这些长度单位基于父元素的字体大小。更多的信息请参见长度单位一节。
CSS字体属性用来描述文档中文本要求的呈现。相反地,字体描述子用来描述字体的特性,从而可以选择一个合适的字体来创建要求的呈现。有关字体分类的信息,请参见字体选择子一节。
值: | [[ <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'。
如果字体集中的另外一个或多个字体不可用,将使用通用字体家族。尽管很多字体提供“缺少的字符”字型,通常是一个方框,不能把这个理解为一个匹配,除非该字体已经是字体集中最后的一个字体。
有两种类型的字体家族名:
为了提高健壮性,我们鼓励作者提供一个通用字体家族作为最后的字体选择。
例如:
<!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 }
它选择了给定语言的任何元素——日文或简体中文——并要求合适的字体。
值: | normal | italic | oblique | inherit |
初始值: | normal |
适用于: | 所有元素 |
可否继承: | 可 |
百分比: | N/A |
媒介: | 图形 |
'font-style'属性要求字体家族中常规(有时称为"roman"或"upright"),斜体和侧体的样式。取值含义如下:
本例中,H1/H2/H3元素的常规文本以斜体显示。但是,H1内的强调文本(EM)以常规体显示。
H1, H2, H3 { font-style: italic } H1 EM { font-style: normal }
值: | normal | small-caps | inherit |
初始值: | normal |
使用于: | 所有元素 |
可否继承: | 是 |
百分比: | N/A |
媒介: | 图形 |
小型大写字体的小写字母的字型和大写字母的字型相似,但是尺寸较小且比例略有不同。'font-variant'属性要求一个字体是二制的(有两个大小写状态状态,如拉丁语言)。该属性对于单制的语言(只有一个大小写状态,如大部分世界上的书写系统)没有视觉上的效果。取值含义如下:
下面的例子设置一个H3元素为小型大写字母,而强调的单词(EM)是侧的小型大写字母。
H3 { font-variant: small-caps } EM { font-style: oblique }
鉴于该属性使文本转换到大写,对于'text-transform'的考虑也同样适用。
值: | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit |
初始值: | normal |
适用于: | 所有元素 |
可否继承: | 可 |
百分比: | N/A |
媒介: | 图形 |
'font-weight'属性指定了字体的重量。取值的含义如下:
P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ BODY { font-weight: 400 } STRONG { font-weight: bolder } /* 500 if available */
子元素继承重量的计算值。
值: | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit |
初始值: | normal |
适用于: | 所有元素 |
可否继承: | 可 |
百分比: | N/A |
媒介: | 图形 |
'font-stretch'属性在一个字体家族中选择一个常规,压缩或扩展的字体样子。绝对值关键字的顺序如下(从最窄到最宽):
相对值关键字'wider'将根据继承而来的值设置为下一个扩展的值(不超过'ultra-expanded');相对值关键字'narrower'将根据继承而来的值设置为上一个压缩的值(不低于'ultra-condensed')。
值: | <absolute-size> | <relative-size> | <length> | <percentage> | inherit |
初始值: | medium |
适用于: | 所有元素 |
可否继承: | 可,继承计算值 |
百分比: | 基于父元素的字体尺寸 |
媒介: | 图形 |
该属性字体为实心时的字体尺寸。取值的含义如下:
[ xx-small | x-small | small | medium | large | x-large | xx-large ]
计算机屏幕上,相邻索引间的缩放系数建议为1.2;如果'medium'字体为12pt,则'large'字体为14.4pt。不同的媒介可能需要不同的缩放系数。同样的,在计算表的时候,用户端应该考虑到字体的质量和可用性。该表格对于不同的字体家族可能不同。
注意。CSS1中,相邻索引间的缩放系数推荐为1.5,根据用户的体验,该数值是太大了。
[ larger | smaller ]
例如,如果父元素的字体尺寸为'medium','larger'值将使当前元素的字体尺寸为'large'。如果父元素的尺寸不靠近表格项中的值,用户端可以自由地在表格项中插值或圆整到最接近的那一个。如果数字值超过了关键字的范围,用户端可能需要对表格值进行外插。
该属性的实际值可能和计算值不同,这是由于'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 }
值: | <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,前者经常会显得“太大”。
该属性允许作者对于一个元素指定一个视觉值,以保持可替换字体列表中的第一选择字体的。取值的含义如下:
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),以及它们的视觉值。注意,视觉值高的字体比视觉值低的字体看起来要大。视觉值过低的字体在给定的尺寸时,几乎不可读。
下一张图形显示了'font-size-adjust'的效果。其中Verdana作为“第一选择”,以及所应用的缩放系数。调整过后,各字体显示的尺寸几乎相同,但是它们实际的(em)尺寸相差大于100%。注意'font-size-adjust'也倾向于固定水平线的量度。
值: | [ [ <'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'的字体的较小的字体版本用作'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 }
通用字体家族是一个备用的机制,用来在最坏的情况:所有指定的字体都不可用时,保留样式表作者部分的要求。较好的印刷控制要求在样式表中应该使用命名的字体。
所有五个通用字体家族都在所有的CSS实现中得到定义并存在(它们并不一定映射到五个不同的实际字体)。
用户端应该提供通用字体家族的比较恰当的缺省选择,它既表达了每一个家族的特性,又在内涵的技术要求中。我们鼓励用户端允许用户选择另外的字体作为通用字体。
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 |
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 |
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 |
CSS中所指的奇异字体主要是装饰性的,但是还保持了字符的呈现(与之相对的Pi或Picture字体并不表示字母)。例如:
拉丁字体 | Alpha Geometrique,Critter,Cottonwood,FB Reactor,Studz |
一个等宽字体的唯一标准就是所有的字型的宽度是一样的。(这使得某些脚本,如阿拉伯文看起来很特别。)效果如同一个手动打字机,通常用来显示计算机代码的例子:
符合该描述的字体的例子有:
拉丁字体 | Courier,MS Courier New,Prestige,Everson Mono |
希腊字体 | MS Courier New,Everson Mono |
Cyrillic字体 | ER Kurier,Everson Mono |
日文字体 | Osaka Monospaced |
Cherokee字体 | Everson Mono |
CSS2字体机制的第二阶段牵涉到用户端根据作者指定的字体属性,可用字体等来选择字体。字体匹配算法的细节在下面给出。
可能的字体选择行为有四种:名字匹配,智能匹配,综合和下载。
渐进渲染是下载和另外一个方法的组合;它先提供一个临时的替换字体(使用名字匹配,智能匹配或综合),因此在要求的字体下载时,可以先阅读内容。一旦真正的字体下载完毕,它替换了临时字体,当然希望不要再重新排列内容。
注意。渐进渲染要求字体的尺度信息以避免实际的字体下载完毕并渲染时要重新对内容进行布局。这一尺度信息在一个文档中对一个字体最多指定一次。
字体描述在作者的字体要求和字体数据(用来格式化文本或及渲染字符所对应的抽象字型的数据——实际的可缩放的轮廓或点阵图)间提供了一个桥梁。字体由样式表属性引用。
字体描述添加到字体数据库中并用来选择相关的字体数据。字体描述包含描述子如字体数据在网络上的位置,以及该字体数据的特征化。字体描述子也用来匹配样式表字体属性和特定的字体数据。字体描述的详细程度可以从仅有字体名字到包括字型宽度的列表。
字体描述子可以被划分为三类:
所有的描述的指定都通过一个@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可能允许附加的描述子,以 获得更好的字体替换,匹配或综合。
下面的描述子和相对应的CSS2字体属性的名称相同,取值为单一值或以逗号分割的值的列表。
除非明确说明,列表内的值和相对应的CSS2属性的值相同。如果只有一个值,那个值就是一定要被匹配的一个值。如果有一个列表,任何一个列表项都构成一个匹配。如果@font-face中省略了描述子,则使用该描述子的初始值。
值: | [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]* |
初始值: | 取决于用户端 |
媒介: | 图形 |
这是一个字体的字体家族名的描述子。取值和'font-family'属性一样。
值: | all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* |
初始值: | all |
媒介: | 图形 |
这是字体样式的描述子,取值和'font-style'属性一样,只是它还接受逗号分割的列表。
值: | [normal | small-caps] [,[normal | small-caps]]* |
初始值: | normal |
媒介: | 图形 |
它是字体是否为小型大写字母变体的CSS表示。它的取值和'font-variant'属性一样,只是它还接受逗号分割的列表。
注意。Cyrillicpryamoĭ字型可能标记'font-variant'为小型大写字母,这是为了与拉丁字型保持更好的一致性(kursiv字型标记'font-style'为斜体的原因也是如此)。
值: | 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'属性一样,但是有三个例外:
值: | 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'属性一样,但是:
值: | all | <length> [, <length>]* |
初始值: | all |
媒介值: | 图形 |
这是字体所提供的字体尺寸的描述子。只允许使用绝对长度单位,这一点和'font-size'属性不同,后者允许相对和绝对的长度和尺寸。该描述子允许一个逗号分割的绝对长度列表。
初始值'all'适用于大多数可缩放字体,因此该描述子主要用在点阵字体的@font-face规则,或者将可缩放字体栅格化为几个字体尺寸的可用范围。
下面的描述子在字体定义中是可选的,但是可以用来避免检查或下载一个字体,而它并不包括渲染一个特定字符的足够的字型。
值: | <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'指定一个值将提供信息,通过声明一个限制的范围,在其中可能有显示字符用的字型,而使搜索更有效。超出该范围的字符不用在该字体中搜索。
该描述子的值可以以任意数量的数字书写。对于单个数字,字符'?'代表“任意值”,它生成了一个字符定位的范围。因此,使用一个数字:
本格式中的一对数字可以用连字号结合来表示更大的范围。例如:
多重、不连续的区域可以通过逗号分割来指定。和CSS中其它逗号分割的字体一样,任何逗号之前或之后的空白将被忽略。例如:
一个中文字体的通常的呈现更可能是:
unicode-range: U+3000-33FF, U+4E00-9FFF
下面的描述子指定了每一个em所包含的“单位”数量;这些单位可以被其它描述子使用来表示各种长度,因此如果其它的描述子依赖于'units-per-em',它就是必须的。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是以全身长方块来协调单位,即布置字型的设计栅格的尺寸的描述子。
在参考实际的字体数据(或者是可下载的,或者是安装在当地的)时,需要该描述子。
值: | [ <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("和")"包围。
对当地安装字体的访问是通过<font-face-name>。字体家族名并不是真正单一的,也不是真正地与平台或字体格式无关,但是目前它是确定当地安装字体数据的最好的方法。通过提供需要的字型补充的说明,使用字体家族名可以更加精确。这可以通过指明ISO 10646字符定位范围来完成,而该字体提供了部分的字型(参见'unicode-range')。
这些描述子对于CSS2定义是可选的,但可以被用来实现作者希望的智能字体匹配或字体尺寸调整。
值: | [<integer>]{10} |
初始值: | 0 0 0 0 0 0 0 0 0 0 |
媒介: | 图形 |
这是一个Panose-1数字的描述子,包含十个十进制整数,以空白分割。该描述子不允许逗号分割的列表,因为Panose-1系统能够表明一段范围的值得到匹配。对于每一个PANOSE数字,初始值为零,表示“任何”;如果使用了这个值,所有的字体将匹配Panose数字。对于拉丁字体,强烈推荐使用Panose-1描述子。更多的细节,请参见附录C。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是一个字体的垂直主字母宽度描述子。如果取值为未定义,则该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是一个字体的水平主字母宽度的描述子。如果取值为未定义,则该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。
值: | <number> |
初始值: | 0 |
媒介: | 图形 |
这是一个字体的垂直笔划角度的描述子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是一个字体的大写字型的高度数量的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是一个字体的小写字型的高度的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。在使用'font-size-adjust'属性时,该描述子非常有用。因为候选字体z值的计算需要字体尺寸和x-height;因此我们推荐包含该描述子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是一个字体的最大的非提升字符的高度的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是一个字体的最大的非提升字符的深度的描述子。如果取值为未定义,该描述子不用来匹配。如果使用该描述子,则必须同时使用'units-per-em'描述子。
字体的综合意味着,在最低程度上,要匹配指定字体的宽度量度。因此,对于综合来说,这一量度信息必须提供。类似地,渐进渲染也要求宽度量度以避免在实际的字体装载后,对内容进行重排列。尽管下面的描述子对于CSS2定义而言是可选的,在作者要求综合(或无重排的渐进渲染)时,某些渲染子还是必须的。如果实际的字体变为可用,它将替换原来的代替者。这里展示的任何一个描述子都将用来提供一个更好或更快的接近需要的字体的方法。
这些描述子中,最重要的是'widths'描述子和'bbox',一旦实际的字体可用时,它们被用来防止文本的重排。另外,在匹配描述子中的描述子也可以用来提供一个更好的实际字体显现的综合。
这是一个字型宽度的描述子。取值是一个逗号分割的列表(<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个字型显式地设置了宽度。
该描述子不能描述对应于一个字符的多个字型,或多个字符的捆绑。因此,该描述子只能用来不包括上下文相关格式或强迫的捆绑的脚本。尽管如此,该描述子对这些情形还是有用的。要求字符到字型是一到多或多到多映射的脚本目前不能使用该描述子来达到字体综合,虽然它们仍然可以使用字体下载或智能匹配。
这是一个字体的最大边界控制框的描述子。取值是一个四个数字,以逗号分割的列表,依次指定了完整字体的边界控制框的左下角x,左下角y,右上角x,右上角y的坐标。
值: | <uri> |
初始值: | 未定义 |
媒介: | 图形 |
字体描述子或者是在样式表中的字体定义中,或在一个单独的由URI表示的字体定义资源中提供。后一种方法在多个样式表引用同一字体时,将降低网络交通。
这些可选的描述子用来对齐不同脚本之间的排列。
值: | <number> |
初始值: | 0 |
媒介: | 图形 |
这是字体的下基准线的描述子。如果该描述子取值为非缺省值(非零),必须同时使用'units-per-em'选择子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是字体的中心基准线的描述子。如果取值为未定义,用户端可以采用不同的方法,如取提升和下降的值的中点。如果使用该描述子,则必须同时使用'units-per-em'描述子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是字体的数学基准线的描述子。如果未定义,用户端可以用中心基准线。如果使用该选择子,则必须同时使用'units-per-em'描述子。
值: | <number> |
初始值: | 未定义 |
媒介: | 图形 |
这是字体的顶基准线的描述子。如果未定义,用户端可以采用一个近似值,如提升值。如果使用该选择子,则必须同时使用'units-per-em'选择子。
给出如下的字体列表:
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; }
本节中列出了对于客户端字体的匹配、综合和为访问网络的异种平台而进行的下载来说有用的字体特征。如果任何需要在网络上使用字体的媒介,不采用将字体数据物理地嵌套在媒介中的方法,这些数据就很有用。
这些特征用来表征字体。它们不仅仅是CSS或样式表所特有的。CSS中,每一个特征由一个字体描述子描述。这些特征也可以映射到VRML节点,或CGM应用结构,或Java API,或另外的样式表语言。一个由媒介获取并存放在缓存中的字体可以被另外一个媒介重用。因此如果一个共同的字体特征系统被不同的媒介使用,就节省了下载时间和网络带宽。
这样的媒介例子的一个非穷举的列表包括:
这是一个特定字体家族字型的全名。通常它包括一系列非标准的文本修饰或装饰,附加在字体家族名后面。它也可以包括一个制造名或缩写,通常附加在字体家族名前面。它只用来引用当地安装的字体,因为被修饰的名字的格式随平台的不同而不同。它必须被引号包围。
例如,TrueType字体的字体家族名和PostScript名就可能在空格、标点或某些单词的缩写方面有所不同(例如,为了符合不同系统或打印机解释器对于名字长度的限制)。例如,PostScript名字中不允许空白,但是空白在字体全名中很常见。TrueType名字可以同时包含PostScript名字,后者不包含空格。
字体定义的名字很重要,因为它是任何当地安装的字体的连接。考虑到对平台和应用的非依赖性,名字要很健壮。基于这个理由,名字应该是与应用或语言无关的。
理想的解决方法是是取一个能唯一标识每一个字体数据集合的名字。这样的名字在目前的字体数据的应用实践中并不存在。具有相同字型名的字体可以因若干个描述子而不同。某些描述子,如字体中字型的不同补充,如果需要的字型在字体内的话,可能并不那么重要。另外的描述子,如不同的宽度量度,使具有相同名字的字体互不兼容。看上去定义这样的一个规则是不可能的:它总是能发现不兼容性,但是不禁止使用与给定名字的字体数据完全吻合的当地拷贝。因此,只有ISO 10646范围内的字符可以满足字体字型名的匹配。
鉴于字体定义中字体字型名的主要目的是允许用户端确定什么时候存在一个指定的字体数据的当地拷贝,该名字必须是一个存在于字体数据所有合法拷贝中的名字。否则,由于当地拷贝无法匹配,将引起不必要的网络交通。
某些值,如宽度量度,的表示是相对于一个抽象的方块的,该方块的高度等于同一类型尺寸行之间应该有的距离。该方块称为em方块,它是定义字型轮廓的设计栅格。该描述子的值指定了该EM方块被分割为多少个单位。比较通常的例子有250(Intellifont),1000(Type 1)和2048(TrueType,TrueType GX及OpenType)。
如果不指定这个值,将无法知道任何字体量度的含义。例如,一个字体的小写字型高度为450;另一个较小的字体却为890!实际上这些数字是分数;第一个字体为450/1000而第二个为890/2048,确实是小了一些。
给出了em方块中中心基准线的位置。中心基准线用于表意文字脚本的对齐,如同拉丁,希腊和Cyrillic脚本中用的下基准线。
不管是显式地还是隐式地,每一个字体都有一个相关联的表,即字体编码表,它指出每一个字型表示的字符。该表格也被引用为编码向量。
事实上,很多字体包含若干个字型来代表同一字符。到底使用哪个字型或者取决于语言规则,或者取决于设计者的偏好。
例如在阿拉伯文字中,所有的字母有四个(两个)不同的形状,取决于该字符是用在单词的开头,单词的中间,单词的结尾或独立使用。在所有的情况下,字符是同一个,因此在源文档中只有一个字符,但是在打印时,应该是不同的。
还有些字体让图形设计者从提供的各个备选形状中来进行选择。不幸的是,CSS2还未提供这样的方法来选择这些备选形状。目前,它总是从这些字体中选择缺省的形状。
指定了字体字型名中的家族名部分。例如,Helvetica-Bold的家族名为Helvetica,而ITC Stone Serif Semibold Italic的家族名是ITC Stone Serif。有些系统将和压缩或扩展字型相关的装饰理解为家族名的一部分。
这是设计栅格上对应于每一个字符的字型宽度的列表。该列表按ISO 10646编码排序。如果多个字型映射到同一个字符,或有强制的合并时,宽度的指定并没有什么用。
该值是指字体中主导的主字母的宽度。可能会有两个或多个设计的宽度。例如,罗马字符中主要的垂直主字母和窄的主字母就不同(带衬线的"M"和"N"),而且同一字体中大写和小写字母的宽度可能不同。同样地,或者由于设计或者由于错误,所有主字母的宽度可能略有不同。
该数值是拉丁、希腊和Cyrillic脚本的平直大写字母从下基准线到顶的y坐标量度。如果字体不包含这些脚本中的字型,该描述子不是必须的。
该数值是拉丁、希腊和Cyrillic脚本的非提升的小写字母从下基准线到顶的y坐标量度。使用平顶的字母,忽略任何光学修正区。通常它用来作为一个小写高度和大写高度的比例,来比较字体家族。
如果字体中不包括这些脚本中的任何字型,该描述子没有用。由于小写字母和大写字母的高度通常以比例的形式表示来比较不同的字体,对于单制脚本,如希伯来文,将大小写高度设置为同一值可能有用,因为对于拉丁文和希伯来文的混合,希伯来文字符通常设置的高度是在拉丁字体的大写和小写高度中间。
给出了下基准线在em方块中的位置。下基准线被拉丁、希腊和Cyrillic脚本用作对齐,就象顶基准线被Sanscrit派生的脚本用来对齐一样。
给出了数学基准线在em方块中的位置。数学基准线用来数学符号的对齐,如同下基准线用来拉丁、希腊和Cyrillic脚本的对齐一样。
如果字体中所有的字型放置时起点重合,然后绘出,包含这个形状的最小的长方形就是最大边界控制框。
如果一个动态可下载的字体的产生是通过一个父字体的子集,那么bbox应该用父字体的那一个。
em方块的这一量度,是从基线到任何字型达到的最高点,除去任何提升或重音标记。
em方块的这一量度,是从基线到任何字型达到的最低点,除去任何下沉或擦音标记。
Panose-1是一个工业标准的TrueType字体分类和匹配技术。PANOSE系统包含10个数字的集合,对拉丁字型的关键属性进行了分类,一个产生这些数字的分类步骤,以及Mapper软件在给定的字型集中确定最接近的可能的字体匹配。系统可以在修改后,使用在希腊和Cyrillic上,但是不适合于单制和表意脚本(希伯来,亚美尼亚,阿拉伯,中文/日文/韩文)。
这里描述了相对于ISO 10646(Unicode)规范的字体的的字型系统。由于这一字型系统是稀疏的(即大部分字体并不覆盖ISO 10646的全体),这一描述子列出了一些确实包含了字型的字体的块或范围(但是不保证全部覆盖),并用来剔除那些不合适的字体(即一个不包含所需要的字型的字体)。它并不肯定地表示字体必然包含所需的字型,只是说该字体值得下载并在其中寻找字体。参见[ISO10646]以了解其他帮助文档的信息。
这一方法可以扩展以包含Unicode字符将来的分配,而不用改变语法也不用违反现有的内容。
如果字体格式不管是显式地或隐式地都没有包含这一信息,字体还可以使用这一特性,但是这一取值必须由文档或样式表的作者给出。
脚本中还可以有其它的分类,如Monotype系统(参见[MONOTYPE])和提议中的ISO脚本系统。这些并不是可以扩展的。
基于这一原因,本规范中使用了ISO 10646字符范围中可以为某一特定字体呈现的字型系统分类。这一系统可以扩展以包含将来的分配。
它给出了em方块中顶基准线的位置。从Sanscrit派生的脚本用它作为对齐线,如同拉丁、希腊和Cyrillic脚本用下基准线作为对齐线一样。
这是字型垂直(或近乎垂直)主干的宽度。该信息通常和Hinting(一种屏幕显示优化技术——译者注)相关联,在某些字体格式中可能不可以直接存取。测量数值应该是字体中占主导的垂直主干的宽度,因为垂直主干可能有不同的组合(例如,在大写的M和N中,有一个主要的,一个“轻”点的)。
这是字体中主导垂直笔划与垂直方向的倾斜角度(逆时针方向为正)。对于向右倾斜的字体——几乎所有的字体都向右倾斜——该数值是负数。该描述子适用于斜体,倾斜体,手写体,以及一般而言,任何垂直笔划不是精确垂直的字体。当然,该数值不为零本身不意味着该字体就是斜体字体。
本规范扩展了CSS1规范中给出的算法。当作者和用户的样式表不包含任何@font-face规则时,该算法将降解到CSS1规范中给出的算法。
将描述子匹配到字体必须非常小心。描述子的匹配顺序被精确的定义,目的是保证这一匹配过程的结果能在所有UA中尽可能保持一致——前提当然是每个UA都安装有相同的库和字体描述。该算法当然可以被优化,只要该优化算法的实现表现得准确地遵循着原始算法。
注意:上述的算法可以进行优化,以避免对每个字符都要重复访问CSS2特性。
步骤2中,基于描述子的匹配规则如下:
'font-weight'特性值以数值形式给出,其中值'400'(或'normal')对应了该字体的“一般”文字。与该字体相关联的重量名称一般会是Book, Regular, Roman, Normal或(有时)是Medium。
一个字体家族中其它重量名与数值重量的关联只是为了保持该家族中重量的顺序而已。用户端必须以某种方式来进行名称到数值的映射,并保持视觉上的合理顺序。与一个值对应的字体不可以比另一个和一个较小的值映射的字体显示得轻。一个用户端在字体家族中如何映射字体重量名到重量值并没有一定的保证。但是,如下的一些描述将启发我们在通常情况下这样的分配是如何进行的:
并不保证对于每个'font-weight'值都有一个更深的字体;例如,有些字体只有普通和粗体,其它一些字体只有八种不同的字体重量。
下面的两个例子显示了常见的映射。
假定"Rattlesnake"家族中有四个重量,从浅到深依次是Regular/Medium/Bold/Heavy。
可用字体 | 分配值 | 填空 |
---|---|---|
"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"分配一个数值。
可用字体 | 分配值 | 填空 |
---|---|---|
"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) |
下面的例子定义了一个特定的字体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 }