font-family字体集的选择 苹方字体 font family

网页的字体选择很有讲究,因为它直接关系到用户的阅读感受。对于字体的选择,要做到字迹清晰、大小合适、粗细恰当,这样才能使文档便于阅读,让读者满意。在不同的环境下,字体的选择和字体样式的设计要求是不同的。本章就是介绍如何选择字体,以及如何设置有关字体的各种属性,以使一篇文章便于阅读。

5.1 字体集选择font-family

属性值:字体名称 | 通用字体集,字体名称| 通用字体集……

初始值:由浏览器决定

作用于:所有元素

是否继承:是

百分比值:不适用

计算值:指定的值

字体是人们对文字的第一印象。对于中文而言,常用的有宋体、黑体和楷体等;对于英文而言,可供使用的字体也非常多。

font-family属性用来定义一个或者多个字体集名称,在定义两个或者两个以上字体集名称的时候,必须用英文半角逗号分隔这些名称。有的字体本身含有空格或者其他符号,例如“Times New Roman”、“LuciaConsol”,则必须把这些字体名称用双引号

引起来。行内定义的时候在双引号中嵌套的双引号相应改为单引号。示例5.1就演示了这样的做法。

示例5.1

<style>

body { font-family: "Times New Roman", Times, Serif;}

</style>

<p>

示例5.2演示了两段对比文字,其中一段不设置任何字体,另一段针对<p>元素设置手写字体,效果如图5.1所示。

示例5.2

<html>

<head>

<title>CSSDemo</title>

<style>

p { font-size: 36pt;}

</style>

</head>

<body>

<p>There're thousands offonts.</p>

<p>There're thousands offonts.</p>

</body>

</html>

图5.1 设置字体样式的前后对比效果

针对一般中文系统而言,浏览器的默认字体为宋体,因此在第1段中文本显示为宋体的英文字母,而第2段设置了“script”字体,因此文本的外观有所改变。

一段文本应该设置多个字体名称,这样做的好处就是一旦有字体不可用,就可以使用紧跟的字体名称进行替代。例如示例5.1中,首选字体“Times NewRoman”一旦遇到了意外情况不可用,此时第2个字体名称“Times”就顶替成为当前的字体。如果有更多的字体出现这种情况,则以此顺序类推。

在Dreamweaver8中,可以很方便地选择一组字体作为字体样式,如图5.2所示。

图5.2 在Dreamweaver8中定义一组字体名称列表

需要注意的是,有时Dreamweaver8的预览窗口无法正确显示当前字体,如图5.3所示,设计者不必理会,只要在IE浏览的时候能够调试通过即可。

图5.3 Dreamweaver8的字体预览显示有错误

上面的几个例子演示了定义特定字体名称的做法。另外,设计者有时候还可以定义通用字体集名称。

所谓通用字体集名称就是统一描述一类字体样式的名称,例如“serif(有边饰字体)”等,具体如表5.1所示。

表5.1通用字体集名称

通用字体集名称

说 明

示 例

serif

有边饰字体

sans-serif

无边饰字体

cursive

卷曲字体

fantasy

花哨字体

monospace

独占位字体

其中这些关键字本身并不是某种确定字体的名称,例如serif有边饰字体就包括Times NewRoman、Georgia等多种字体,sans-serif就包括Verdana、Arial等字体,因此浏览器在遇到字体集名称的时候,会自动从系统中寻找与之匹配的字体进行显示。

表5.2列举了与字体集相对应的字体。

表5.2与字体集相对应的字体

字体名称

所属通用字体集

示 例

Georgia

serif

Verdana

sans-serif

Monotype Corsiva

Cursive

Pristina

Fantasy

Courier New

monospace

使用通用字体集名称的好处就是浏览器总能够从系统中找到与之相匹配的具体字体,而不必担心某种字体甚至备用字体都不可用。所以,设计者在定义任何字体的时候,最好在最后都加上一个通用字体集,以保证字体显示万无一失。

示例5.3演示了使用某种字体集名称定义字体的方法。

示例5.3

<html>

<head>

<title>CSSDemo</title>

<style>

body { font-family: Verdana, Arial, Sans-serif; }

</style>

</head>

<body>

<p>Here provides 2 fontnames and 1 generic font family.

</body>

</html>

有一点必须注意:不要定义访问者系统中不存在的字体。例如,在设计者的电脑中有一种叫做“myownfont”的冷僻字体,在设计的过程中,设计者可以看到这种字体的显示效果,这是因为设计者电脑中已经安装了这样的字体。而其他访问者系统中并没有这种字体,浏览者打开页面看到的是用其他字体代替的文本。这样,就完全丧失了设计者最初设想的效果。

要避免这样的情况发生,首先应该尽量一次定义多个备用字体,一旦首选字体不可用,那么其他字体可以补充产生效果。

另外,设计者应该尽量使用Windows系统自带的字体,也就是说,一般在安装Windows之后,不再安装新字体。即使安装了新字体,也要坚持使用Windows原先的自带字体,这样才能保证对方系统能够看到自己的设计效果。

表5.3列举了Windows自带的常用字体,一般而言,这些字体样式已经足够日常制作网页使用了。

表5.3Windows自带的常用字体

字体名称

说 明

效 果 演 示

Arial

无边饰、瘦长型字体

Comic Sans MS

无边饰、扭曲型字体

Courier New

有边饰、等宽字体

Fixedsys

无边饰、等宽字体

Georgia

有边饰字体

Impact

无边饰、瘦长型字体

Lucia Console

无边饰、等宽字体

Microsoft Sans Serif

无边饰字体

Tahoma

无边饰字体

Times New Roman

有边饰字体

Verdana

无边饰字体

宋体

有边饰中文字体

黑体

无边饰中文字体

隶书

有边饰中文字体

幼圆

无边饰中文字体

字体样式可谓五花八门,在其他字体集中,还可能由古体数字、小体大写数字、缩减或者扩展字母等样式,这些样式在当前版本的CSS样式表中是没有相应属性的。

  

爱华网本文地址 » http://www.413yy.cn/a/25101017/365526.html

更多阅读

dota中斧王装备的选择? dota2斧王

dota中斧王装备的选择?——简介斧王前期基本上有很大的优势,,后期在团队作战中的作用,也不可缺少.可以简单理解为前期队友依靠他,后期的话主要依靠队友.斧王的自身技能有一个受到攻击之后可以反击伤害的技能,出门圆盾+次技能基本上

婴儿牙刷的选择方法 婴儿指套牙刷

宝宝刚长出1~2个小牙时,妈妈可以用手指套上无菌纱布或一种市场上可买到的纸牙刷轻轻擦拭宝宝的乳牙,舌头,牙龈和口腔黏膜。清洁过程中使用淡盐水,还可选用套在手指上的指套牙刷来为小宝宝刷牙,这样不仅能洁齿,而且还能按摩宝宝的牙龈。婴

鱼竿的选择,新手怎样选择钓鱼竿? 新手买钓鱼竿

鱼竿的选择,新手怎样选择钓鱼竿?——简介现在喜欢钓鱼的朋友是越来越多,但是有很多新手钓友在怎样选择钓竿上面还是有一定的难度,总不知道该如何选择,看别人使用也不好掌握。因为有使用长竿短线钓十多米远的,也有使用短竿齐竿线台钓的等等

九阴真经门派的选择及优劣分析 九阴真经ol门派选择

九阴真经门派的选择及优劣分析——简介九阴真经门派选择介绍可以帮助玩家更加的了解每个门派,九阴真经门派选择介绍是每个新手玩家了解门派特色的最快途径。九阴真经门派的选择及优劣分析——工具/原料九阴真经九阴真经门派的选择

声明:《font-family字体集的选择 苹方字体 font family》为网友撩亻臸罙情分享!如侵犯到您的合法权益请联系我们删除