《CSS字体与文本相关属性.ppt》由会员分享，可在线阅读，更多相关《CSS字体与文本相关属性.ppt（34页珍藏版）》请在三一办公上搜索。
1、,本章要求：,第10章 CSS字体与文本相关属性,使用text-shadow属性给文字添加阴影文本相关的属性应用如何使用CSS3中的服务器字体使用font-size-adjust属性微调字体大小,主要内容,1.给文字添加阴影text-shadow属性2.文本相关属性3.CSS 3新增的服务器字体4.使用font-size-adjust属性微调字体大小5.综合实例设计立体文本,第10章 CSS字体与文本相关属性,10.1 给文字添加阴影text-shadow属性,10.1.1 text-shadow属性的使用方法10.1.2 指定多个阴影,10.1.1 text-shadow属性的使用方法,字体
2、相关属性中提供了一个text-shadow属性，该属性在CSS 2.0中被引入，CSS 2.1删除了该属性，CSS3.0再次引入了该属性。该属性的值如下：Color：指定颜色。Length：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。Lengt：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。Opacity：由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果仅仅需要模糊效果，将前两个length全部设定为0。,【例10-1】下面的一个实例，展示了设置阴影的几个参数的意义：阴影 spandisplay:block;padd
3、ing:8px;font-size:xx-large;text-shadow:red 5px 5px 2px：明日科技MRtext-shadow:5px 5px 2px（省略阴影颜色）：明日科技MRtext-shadow:-5px-5px 2px gray（向左上角投影）：明日科技MRtext-shadow:-5px 5px 2px gray（向左下角投影）：明日科技MRtext-shadow:5px-5px 2px gray（向右上角投影）：明日科技MRtext-shadow:5px 5px 2px gray（向右下角投影）：明日科技MRtext-shadow:15px 15px 2px g
4、ray（向右下角投影、更大偏移距）：明日科技MRtext-shadow:5px 5px 10px gray（模糊半径增加，模糊程度加深）：明日科技MR,从上面代码可以看出，通过改变横向与纵向的距离，来控制阴影向哪个方向投影、投影的偏移距离。在浏览器中浏览该页面，可以看到如图10-1所示的效果。图10-1 为文字设置阴影,可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。指定多个阴影时使用逗号将多个阴影进行分割。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器支持该功能。【例10-2】下面来看一个指定多个阴影的实例，在该实例中为文字依
5、次指定了红色、蓝色及绿色阴影，同时也为这些阴影指定了适当的位置，其实现的代码如下：指定多个阴影divtext-shadow:10px 10px#FF0000,40px 35px#0066FF,70px 60px#00FF33;color:navy;font-size:50px;font-weight:bold;font-family:宋体;保持好心情,10.1.2 指定多个阴影,在浏览器中浏览该页面，可以看到如图10-2所示的效果。图10-2 指定多个阴影,10.2 文本相关属性,10.2.1 文本自动换行：word-break10.2.2 长单词和URL地址换行,当HTML元素不足以显示它里
6、面的所有文本时，浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。有些时候，希望让浏览器可以在西方文字的单词中间换行，此时可借助于word-break属性。如果把word-break属性设为break-all，即可让浏览器在单词中间换行。【例10-3】本实例演示了word-break属性的功能。程序代码如下：文本相关属性设置/*为div元素增加边框*/divborder:1px solid#000000;height:60px;width:200px;w
7、ord-break:keep-all Behind every successful man there is a lot unsuccessful yeas.word-break:break-all Behind every successful man there is a lot unsuccessful yeas.,10.2.1 文本自动换行：word-break,上面页面中第二个元素设置了word-break:break-all，这意味着允许该里的内容在单词中换行。使用浏览器浏览该页面，将看到如图10-3所示的效果。图10-3 在单词中换行说明：到目前为止，Firefox和Opera
8、两个浏览器都不支持word-break属性，而Internett Explorer、Safari、Chrome都支持该属性。,对于西方文字来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器不能给较长的单词自动换行。当浏览器窗口比较窄的时候，文字会超出浏览器的窗口，浏览器下部出现滚动条，让用户通过拖动滚动条的方法来查看没有在当前窗口显示的文字。但是，这种比较长得单词出现的机会不时很大，而大多数超出当前浏览器窗口的情况是出现在显示比较长的URL地址的时候。因为在URL地址中没有半角空格，所以当URL地址中没有连字符的时候，浏览器在显示时是将其视为一个比较长得单词来进行显示的。在CSS 3中
9、，使用word-wrap属性来实现长单词与URL地址的自动换行。该属性可以使用的属性值为normal与break-word两个。使用normal属性值时浏览器保持默认处理，只在半角空格或连字符的地方进行换行。使用break-word时浏览器可再长单词或URL地址内部进行换行。,10.2.2 长单词和URL地址换行,【例10-4】本实例演示了word-wrap属性的功能，其代码如下：文本相关属性设置/*为div元素增加边框*/divborder:1px solid#000000;height:55px;width:140px;word-wrap:normal Our domain is http
10、:/word-wrap:break-word Our domain is http:/,在浏览器中浏览该页面，可以看到如图10-4所示的效果。图10-4 在URL地址中换行需要指出的是，word-break与word-wrap属性的作用并不相同，它们的区别如下：word-break：将该属性设为break-all，可以让组件内每一行文本的最后一个单词自动换行。word-wrap：该属性会尽量让长单词、URL地址不要换行。即使将该属性设为break-word，浏览器也会尽量让长单词、URL地址单独占用一行，只有当一行文本都不足以显示这个长单词、URL地址时，浏览器才会在长单词、URL地址的中间换
11、行。,10.3 CSS 3新增的服务器字体,10.3.1 使用服务器字体10.3.2 定义粗体、斜体字10.3.3 优先使用客户端字体,使用服务器字体非常简单，只要使用font-face定义服务器字体即可。font-face的语法格式如下：font-facefont-family:name;src:url(url)format(fontformat);font-weight:normal;上面的语法格式中的font-family属性值用于指定该服务器字体的名称，这个名称可以随意定义；src属性中通过url指定该字体的字体文件的绝对或相对路径；format则用于指定该字体的字体格式，到目前为止，
12、服务器字体还只支持TrueType格式（对应于*.ttf字体文件）和OpenType格式（对应于*.otf字体文件）。使用服务器字体的步骤如下：（1）下载需要使用的服务器字体对应的字体文件。（2）使用font-face定义服务器字体。（3）通过font-family属性指定使用服务器字体,10.3.1 使用服务器字体,【例10-5】本实例演示了如何使用服务器字体。本例具体的实现过程是：首先是定义服务器字体：Tahoma，该字体对应的字体文件是BAUHS93.ttf（该字体文件必须放在与本实例的index.html相同的路径下），并指定该字体是TrueType字体格式；接下来通过style属性指
13、定元素使用Tahoma字体。其具体的实现代码如下：服务器字体/*定义服务器字体，字体名为Tahoma服务器字体对应的字体文件为BAUHS93.ttf*/font-face font-family:Tahoma;src:url(BAUHS93.ttf)format(TrueType);,在浏览器中浏览该页面，将看到如图10-5所示的效果。图10-5 使用服务器字体实例,在网页上指定字体时，除了可以指定特定字体之外，还可以指定使用粗体字、斜体字，但在使用服务器字体时，需要为粗体、斜体、粗斜体使用不同的字体文件（需要相应地下载不同的字体文件，下载地址为：）。【例10-6】本实例演示了如何定义粗体、斜
14、体、粗斜体的设置，具体步骤是：首先定义了4个名为CrazyIt的服务器字体，分别代表了普通、粗体、斜体、粗斜体4种服务器体。接下来页面中定义了4个元素都指定使用CrazyIt字体，但指定了粗体、斜体、粗斜体风格，将自动应用上面定义的4种服务器字体。其实现的具体代码如下：服务器字体/*定义普通的服务器字体*/font-face font-family:CrazyIt;src:url(CENTAUR.ttf)format(TrueType);/*定义粗体的服务器字体*/font-face font-family:CrazyIt;src:url(Fontin_Sans_B_45b)format(Op
15、enType);font-weight:bold;,10.3.2 定义粗体、斜体字,/*定义斜体的服务器字体*/font-face font-family:CrazyIt;src:url(Fontin_Sans_I_45b.otf)format(OpenType);font-style:italic;/*定义粗斜体的服务器字体*/font-face font-family:CrazyIt;src:url(Fontin_Sans_BI_45b.otf)format(OpenType);font-style:italic;font-weight:bold;http:/http:/http:/htt
16、p:/,在浏览器中浏览该页面，将看到如图10-6所示的效果。图10-6 粗体、斜体、粗斜体的服务器字体,虽然CSS 3提供了服务器字体功能，但在开发时也不能经常使用服务器字体，因为用服务器字体需要从远程服务器下载字体文件，因此效率并不好。因此，应该尽量考虑使用浏览者的客户端字体。只有当客户端不存在这种字体时，才考虑使用服务器字体作为替代方案，CSS 3也为这种方案提供了支持。CSS 3使用font-face定义服务器字体时，src属性除了可以使用url来指定服务器字体的路径之外，也可以使用local指定客户端字体名称。体文件，下载地址为：）。,10.3.3 优先使用客户端字体,【例10-7】下
17、面是使用font-face属性显示客户端字体的一个实例，在该实例中，定义CrazyIt服务器字体，指定src属性时，优先使用local(“Arial”)客户端字体；当客户端不存在这种字体时，url(“Fontin_Sans_I_45b”)字体会作为替代字体。其实现的代码如下：优先使用客户端字体/*定义服务器字体：CrazyIt该字体优先使用客户端字体：Arial当客户端字体不存在时，使用Fontin_Sans_I_45b.ttf作为替代字体。*/font-face font-family:CrazyIt;src:local(Arial),url(Fontin_Sans_I_45b)format
18、(TrueType);,在浏览器中浏览该页面（假设客户端存在Arial字体），将可以看到如图10-7所示的效果。图10-7 font-face属性显示客户端字体,10.4 使用font-size-adjust属性微调字体大小,10.4.1 字体不同导致文字大小的不同10.4.2 font-size-adjust属性的使用方法10.4.3 font-size-adjust属性的使用示例,【例10-8】首先，来看一个实例，在该实例中有4个div元素，每个div元素的字体都设定为16个像素，但是字体全都不一致，导致页面上显示出来的文字大小也不相同，其实现的代码如下：字体不同导致文字大小不同的示例di
19、v#div1 font-family:Verdana;font-size:30px;div#div2 font-family:Tahoma;font-size:30px;div#div3 font-family:sans-serif;font-size:30px;div#div4 font-family:Georgia;font-size:30px;You and meYou and meYou and meYou and me,10.4.1 字体不同导致文字大小的不同,这段代码的运行结果如图10-8所示图10-.8 字体不同导致文字大小不同的示例 由此可见，如果更改了字体的种类，很可能会因为
20、文字大小的变化而导致原来的页面布局产生混乱。,font-size-adjust属性的使用方法很简单，但是它需要使用每个字体种类自带的一个aspect值（比例值）。font-size-adjust属性的使用方法类似如下，其中0.46为Times New Roman字体的aspect值。divfont-size:16px;font-family:Times New Roman;font-size-adjust:0.46;aspect值可以用来在将字体修改为其他字体时保持字体大小基本不变，这个aspect值的计算方法为x-height值除以该字体的尺寸，x-height值是指使用这个字体书写出来的小
21、写x的高度（像素为单位）。如果某个字体的尺寸为100px时，x-height值为58像素，则该字体的aspect值为0.58，因为字体的x-height的值总是随着字体的尺寸一起改变的，所以字体的aspect值都是一个常数。表10-1所示为一些常用的西方字体的aspect值。表10-1 常用字体的aspect值,10.4.2 font-size-adjust属性的使用方法,【例10-9】本实例中有3个div元素，其中一个div元素的字体使用Comic Sans MS字体，另两个div元素的字体使用Times New Roman字体。代码如下：font-size-adjust属性的使用示例div
22、#div1 font-size:16px;font-family:Comic Sans MS;font-size-adjust:0.54;div#div2 font-size:14px;font-family:Times New Roman;font-size-adjust:0.46;div#div3 font-size:16px;font-family:Times New Roman;font-size-adjust:0.46;Our domain is Our domain is Our domain is,10.4.3 font-size-adjust属性的使用示例,这段代码的运行结果如
23、图10-9所示。图10-9 font-size-adjust属性的使用示例,在网页设计时，经常会设计各种实用的文本效果，通过这些文本效果给网页增加一定的色彩，本实例中使用text-shadow属性设计立体文本，效果如图10-10所示。图10-10 立体文本,10.5 综合实例设计立体文本,实现本实例时，主要是使用text-shadow属性给文字指定多个阴影，并且针对每个阴影使用不同的颜色。指定多个阴影时使用逗号将多个阴影进行分割，在这里通过在文本的左上和右下各添加一个1像素的错位补色来实现的一种淡淡的立体效果。代码参考如下：设计立体文本p text-align:center;padding:2
24、4px;margin:0;font-family:Georgia,Times New Roman,Times,serif;font-size:80px;font-weight:bold;color:#D1D1D1;background:#CCC;text-shadow:1px 1px white,-1px-1px#444;mingrikeji,（1）text-shadow属性用于设置文字是否有阴影效果。（2）将word-break属性设为break-all，可以让组件内每一行文本的最后一个单词自动换行。（3）在CSS 3中，使用word-wrap属性来实现长单词与URL地址的自动换行，该属性可
25、以使用的属性值为normal与break-word两个。（4）在CSS 3中，新增了Web Fonts功能，使用这个功能，网页中可以使用安装在服务器端的字体。（5）虽然CSS 3提供了服务器字体功能，但在开发时也不能经常使用服务器字体，因为用服务器字体需要从远程服务器下载字体文件，因此效率并不好。因此，应该尽量考虑使用浏览者的客户端字体。（6）使用font-size-adjust属性，可以在保持文字大小不发生变化的情况下改变字体的种类。,知识点提炼,10-1 使用CSS提供的哪个属性可以为文字设置阴影，并且写出一个简单的示例代码。10-2 word-break属性与word-wrap属性有什么区别？10-3 简述使用服务器字体的基本步骤。10-4 在CSS3中微调字体大小时，需要使用什么属性？,习题,
