谈谈网页设计中的字体应用 (1) Font Set
作者:棕熊 来源:棕熊blog 发布时间:2009-11-24 12:55:00
Hihi, 大家好~
最近有不少人都提及了网页上该如何选择字体的问题。问题虽然小,但是却是前端开发中的基本,因为目前的网页,还是以文字信息为主,而字体,作为文字表现形式的最重要参数之一,自然有着相当重要的地位。可惜字体的重要性在很长时间内并没有得到足够的重视。很多人对字体的概念还是停留在 font-family: "宋体", Arial, Helvetica, serif 的阶段,却不明白为什么这样设置,这样设置是否合理等等。现在就让我说说字体的来龙去脉吧。
- font-family
大家知道CSS规则中定义字体是通过 font-family 这条规则来实现的。仔细翻翻CSS的文档,却没有发现任何能指定某一个特定字体的规则。
想想十年前,你可以随处看见类似于这样的代码:
<font face="Frankin Gothic Book">Lorem Ipsum</font>
几乎不会有人考虑到,Frankin Gothic Book是一个 Windows only 的字体。在一台Mac上根本看不到Frankin Gothic Book字体的效果,系统因为找不到这种字体,就改用Mac的默认字体显示了。于是,网页的风格就和原来完全不一样了,根本达不到Frankin Gothic Book的效果。于是W3C提出了font set 的概念——将一系列近似的字体按照优先级顺序组成一个列表;浏览器从列表头部开始匹配,知道找到第一个可用的字体,并使用该字体进行显示。
比如上面这个例子,我们可以创建这样的一个font set:
<span style='font-family: "Franklin Gothic Book","Lucida Grande"'>Lorem Ipsum</span>
我们来看看浏览器怎么来呈现这段文字吧:
Windows下:浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book,使用Frankin Gothic Book字体显示。
Mac 下:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。
这样在Mac上,Mac就能以与Frankin Gothic Book类似的Lucida Grande字体显示这段文字。
但是可能存在一台电脑,上面既没有Frankin Gothic Book字体,也没有Lucida Grande字体,那么它仍然无法正确显示上面的这段文字。于是开发人员不得不在这个字体列表中不断增加字体以适应各种系统,导致这个font set失去原本的“组织近似字体”的作用。于是font set中引入了“通用字体族”,也就是我们经常看见的 serif 和 sans-serif。我会在今后的文章中详细的介绍这两个,以及一些其他的通用字体族。在这里,我们可以简单的将它们理解为一种“在所有指定字体都失效的情况下,浏览器指定的一种最终的代用字体”。
比如我们在改进一下上面的那段示例文字:
<span style='font-family: "Franklin Gothic Book","Lucida Grande",sans-serif'>Lorem Ipsum</span>
我们再看看浏览器怎么来呈现这段改进后的文字吧:
Windows下:浏览器从列表的第一个字体开始搜索——系统中存在Frankin Gothic Book,使用Frankin Gothic Book字体显示。
Mac 下:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——Lucida Grande。系统中存在Lucida Grande字体,终止搜索,并用Lucida Grande字体显示。
某系统:浏览器从列表的第一个字体开始搜索——系统中不存在Frankin Gothic Book,搜索失败。继续搜索下一个字体——系统中也不存在Lucida Grande字体。继续搜索下一个字体——通用字体sans-serif。浏览器应用它的默认sans-serif字体"Arial"来显示这段文字。
请注意两点。首先,通用字体族具体对应哪个字体,是由浏览器决定的。上面例子中浏览器指定Arial为sans-serif字体,但完全有可能另一个浏览器指定Helvetica 为它的sans-serif字体。具体哪个字体被最终应用,是无法预期的。其次,通用字体族只是一种在font set中其他字体都无效时的代用方案。因此——设计者应该尽可能的给出齐全的font set,以尽可能的覆盖所有的系统,而不应该依赖于通用字体族。
类似于以下的两种写法都是错误的:
<span style="font-family:sans-serif">Lorem Ipsum</span>
<span style="font-family:sans-serif,Arial">Lorem Ipsum</span>
第一种写法的错误在于——它相当于根本没有指定字体,仍旧是交由浏览器选择字体。写了相当于没写。
第二种写法的错误在于顺序。因为通用字体族应该在一个font set中其它所有字体都失效时才起作用。因此,将指定字体放在通用字体之后,会造成制定字体尚未匹配时就使用了通用字体。所以,你应该务必使通用字体处在font set中的最后一位。
另外,这里要说明两件事情。
首先,浏览器应用font set中哪个字体的规则虽然看上去很简单,但其实非常trickish。我会在以后的文章中做出具体的说明。
其次,虽然字体的CSS规则名称叫font-family, 但它的实质是一个font set,而不等是印刷意义上的font family。印刷上的font family 是指一系列相同字样的不同强度组合,比如Lucida Family(包括Lucida Sans, Lucida Sans Typewriter, Lucida Console, Lucida Grande等等)和Arial Family(Arial, Arial Black, Arial Rounded MT等等),但显然这些font family 都不适合直接拿来当作一个font set来使用。
今天就到这里了哟。下次我们来仔细谈谈通用字体族。
猜你喜欢
- 如何用拦截表单的方法上传图片? 看下列代码:<script language="
- Javascript有没有内存泄露?如果有,如何避免?鉴于最近有好几个人问到我类似的问题,看来大家对这部分内容还没有系统的研究过,因此,打算
- 上回 说到“大屏幕浏览页面的良好体验,本就应该用户自己调整窗口。”根据屏幕不同大小,缩小窗口出横向滚动条在所难免,但理想情况下,页面应该能适
- 各位大家好!很荣幸能在这里和大家聊聊!(*^__^*) 嘻嘻……此处省略488字,切入正题。关于网页设计这个行业,在中国来讲这个行业并不成熟
- 一个不错的网页拾色器也叫调色版,请看截图:当想要更多颜色时点击“其它颜色...”此时将调用系统自带的那个颜色选择框:注意:只有把〈scrip
- PHP是一种面向对象的编程语言,它允许开发者使用面向对象的编程技术来构建复杂的应用程序。下面是一些关于PHP面向对象编程的讲解:类与对象类是
- 关于本文:本着互联网共享主义精神,特写此文献给建站新手,授人以鱼,不如授人以渔,本文所讲的只是方法和原理,希望大家看完此文,能够从中得到些帮
- 以下的文章主要介绍的是SQL Serve数据库到DB2连接服务器的实现过程,我们大家都知道不同数据库平台的互连,一般对其称之为数据库的异构服
- 1.认识数组数组就是某类数据的集合,数据类型可以是整型、字符串、甚至是对象Javascript不支持多维数组,但是因为数组里面可以包含对象(
- 如何用下拉列表显示数据库里的内容? 我们来看看实现这个功能的程序:<%Dim objDC, objRSS
- 通过视图来访问数据,其优点是非常明显的。如可以起到数据保密、保证数据的逻辑独立性、简化查询操作等等。但是,话说回来,SQL Server数据
- IE>6 及其它浏览器不在此文论述范围内。img 的 onload 事件,是当图片加载完成之后,就处触发。img.complete 这
- 设置密码保护SqlServer数据库备份文件! 备份SqlServer数据库 Backup Database [数据库] To disk=&
- 上个月,我写了一篇关于微软如何在向jQuery贡献代码的文章,也谈到了在第一批贡献的代码中的一些功能:jQuery模板和数据链接支持.今天,
- 问题描述:使用 SQL 2005 w/ SP2 的汇出汇入精灵将数据从 Access 汇入到 SQL2005 发生了错误,但使用在SQL 2
- // 格式化字符串 Fmt("{0}.[{id}].{name}",{id:1,name:'
- 在本节描述的示例代码,提供真实的例子来示范在 FileSystemObject 对象模式中可用的许多功能。该代码显示了如何一起使用对象模式的
- IE的特殊性 IE的DOM元素属性与Firefox, Opera, Safari有些不同。在IE中,我们可以给DOM添加任意自定
- 人们对于产品设计这类事情,往往容易眼高手低,在宇宙层面上夸夸其谈,却落不了地,只能飘着。真正到了自己动手的时候,才会发现问题很多,实践和理论
- 如何用SA-FileUp上传多个文件?表单处理: <%@&nbs