网页设计中的字体匹配

  • 2018-09-29 14:53:15
  • 阅读次数:
  • 作者:盈岚科技小编
  • 来源:http://www.lyjtt.cn

可以看到,CSS网页设计允许匹配字体系列、加粗和变形,所有这些都是通过字体匹配完成的,这是一个相当复杂的过程。如果网页制作人员想帮助用户代理在显示其文档时做出正确的字体选择,了解这个过程就很重要。我把这个内容留到这一章的最后才介绍,因为这对于理解字体属性如何工作并不是必要的,有些读者可能想跳过这个部分直接看下一章,如果你还对这个内容感兴趣,下面将介绍字体匹配是如何工作的。

用户代理创建(或访问)一个字体属性数据库。这个数据库列出了用户代理能访问的所有字体的各种CSS属性。一般地,这将是机器上安装的所有字体,虽然可能还包含另外的一些字体(例如,用户代理可以有自己的内置字体)。如果用户代理遇到两种相等的字体,会把其中一个忽略。

用户代理取得应用了字体属性的元素,并构建一个字体属性列表,其中列出显示该元素的必要字体属性。基于这个列表,用户代理先对显示元素时使用的字体系列做第一个选择。如果完全匹配,那么用户代理就可以使用这个字体。否则,需要多做一些工作。

字体首先根据font-style进行匹配。关键字italic可以与所有标有“italic”或“oblique”的字体匹配,如果没有这样的字体,则匹配失败。

接下来再根据font-variant进行匹配。未标“small-caps”的字体都认为是normal。与small-caps匹配的字体可以是标为“small-caps”的字体,也可以是允许合成small-caps风格的字体,或者是用大写字母替换小写字母的字体。

然后根据font-weight匹配,由于网页设计中处理font-weight的特殊方式,这个匹配绝不会失败(这在本章前面已经解释过)。

之后再针对font-size进行匹配。必须在某个可忍受的范围内匹配,不过这种忍受程度要由用户代理定义。因此,一个用户代理可能认为错误不超过20%都能匹配,而另一个用户代理则只允许指定大小与实际使用的大小之间有10%的差异。

如果在第2步中未匹配任何字体,用户代理就会在这个字体系列中查找下一个候选的字体。如果找到了,则对该字体重复第2步。

假设找到一个通用匹配,但是其中不包含显示给定元素所需的一切——例如,这种字体没有版权符号——用户代理就要回到第3步,再搜索另一个候选字体,然后再通过第2步来验证这种字体是否匹配。

最后,如果没有找到匹配,而且所有候选字体都已经试过了,用户代理就会为给定的通用字体系列选择默认字体,尽其所能正确地显示这个元素。

整个过程很长,也很麻烦,不过这有助于理解用户代理如何选择字体。例如,你可能想指定在一个文档中使用Times或任何其他serif字体:

body {font-family: Times, serif;}

对每个元素,用户代理要检查该元素中的字符,并确定Times是否能提供匹配的字符。在大多数情况下,网站制作人员确实能做到这一点而没有任何问题。不过,假设段落中有一个汉字字符,Times没有与这个汉字匹配的字符,所以用户代理必须忽略这个字符,或者查找另一个能满足该元素显示需求的字体。当然,任何西方字体都不太可能包含中文字符,不过假设存在这样一种字体(暂且称之为AsiaTimes),用户代理显示该元素时可以使用这个字体——或者只是在显示这个字符时使用该字体.因此,可能整个段落用AsiaTimes显示,或者段落中的所有内容都用Times显示,只有那个中文字符除外,它用AsiaTimes显示。

font-face 规则

CSS2引入了一种方法,可以通过@font-face规则对字体匹配有更多控制。在2003年春天前,所有Web浏览器都没有充分实现这个规则,所以@font-face已经从CSS2.1去除。我不打算在这上面多花功夫,因为这个规则的各个方面相当复杂,单是说明这个规则就可能需要整个一章(甚至一本书)的篇幅才能做到。

有4种方法可以确定文档中使用的字体。我们将简要讨论这4种方法,因为CSS的将来版本可能使用这种机制,而且大多数SVG显示器至少部分支持CSS2中描述的font-face 匹配。如果你需要实现@font-face,请参考CSS2规范,或者任何最新版本的CSS (如CSS3 web fonts模块),下面的描述并不完备。

字体名匹配

要在网页设计中匹配字体名,用户代理会使用与所请求字体有相同系列名的一种可用字体。这种字体的外观和度量与所请求的字体可能并不相同,这是本节前面介绍的方法。

智能字体匹配

在这种情况下,用户代理使用外现上与所请求字体最接近的一种可用字体。这两种字体可能并不能完全匹配,但是它们应当尽可能地接近。

用于匹配两种字体的信息包括字体种类(文本或符号)。是否有上下短线、加粗、大写字母高度、x-height、上升、下降、倾斜等等。例如,一个网站制作人员可能要求一个字体与某倾斜字体尽可能地接近,为此写出以下规则:

@font-face {font-style: normal; font-family:"Times"; slope:-5;}

然后由用户代理找到一个serif normal(竖直)字体,如果Times无法满足要求,将其向右倾斜5度尽可能接近倾斜字体。CSS2中还描述了字体的很多其他方面,如果用户代理支持这些方面,所有这些都可以用于完成匹配过程。

字体合成

用户代理也可以选择实时地生成一个字体,使其外观和度量与@font-face规则中指定的描述相匹配。CSS2这样描述这个过程:

在这种情况下,用户代理创建一个字体,它不仅在外现上几乎匹配,而且与所请求字体的度量匹配。合成信息包括匹配信息,通常需要比某些匹配机制使用更准确的参数值。具体地,如果要保留指定字体的所有布局特征,合成需要准确的宽度度量和字符来完成字形和位置信息替换。

如果你对这些已经了解,可能就不需要我再多做解释了。如果你还不了解,也许根本不需要担心这个问题。

字体下载

采用这种方法,用户代理可以在文档中下载一个远程字体来使用。要声明一个下载字体,可以写如下规则:

@font-face {font-family:"Scarborough Fair";

src: url<http://www.ejcaniple.com/fonts/ps/scarborough.ps>;}

然后就可以在整个文档中使用该字体了。

即使用户代理允许字体下载,可能也要花一些时间才能获取到字体文件(这种文件往往很大这就会延迟文档的显示,或者至少延迟最终输出。

小结

尽管网页设计人员不能指望文档中一定使用某个特定的字体,不过可以很容易地指定通用字体系列。这种特殊行为得到了很好的支持,因为如果用户代理不允许网页设计人员(甚至读者)指定字体,会很快发现这种用户代理不受欢迎。

对于字体管理的其他方面,相应的支持程度则有所不同。往往能很好地改变字体大小,不过在这方面20世纪的用户代理实现差别很大,有些极其简化,有些则非常正确。对网页设计人员来说,让人困惑的往往不是以何种方式支持字体大小调整,而是他们想用的单位(点)在不同媒体上得到的结果可能差异很大,甚至在不同操作系统和用户代理上也可能得到不同的结果。使用点作为单位有很多危险,在网页设计中使用长度单位通常不是一个好主意。百分数、em单位和ex单位往往更适合修改字体大小,因为这些单位在所有常用显示环境中能很好地缩放。

另一个让人困惑的方面可能是一直缺少一种机制来指定要下载并在文档中使用的字体。这意味着创作人员仍依赖于用户可用的字体,因此,他们无法预计文本会有怎样的外观。

说到为文本指定样式,还有很多不涉及字体的方法,这是下一章要讨论的内容。

[1]注1:注意,有7个绝对大小关键字,因为有7个字体大小(例如,<font size="5">)。由于一般的默认字体大小历来都是3,所以CSS绝对大小关键字中的第3个值就指示默认字体大小。因为第3个关键字刚好是small,所以Explorer会有这样的行为。


当前文章标题:网页设计中的字体匹配

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

上一篇:网页设计中字体属性的设置

下一篇:网页设计中文本的缩进和水平对齐

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