《第10章CSS字体与文本相关属性.ppt》由会员分享，可在线阅读，更多相关《第10章CSS字体与文本相关属性.ppt（34页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、本章要求本章要求：第第1010章章 CSSCSS字体与文本相关属性字体与文本相关属性u使用text-shadow属性给文字添加阴影u文本相关的属性应用u如何使用CSS3中的服务器字体u使用font-size-adjust属性微调字体大小主要内容主要内容1.给文字添加阴影text-shadow属性2.文本相关属性3.CSS 3新增的服务器字体4.使用font-size-adjust属性微调字体大小5.综合实例设计立体文本第第1010章章 CSSCSS字体与文本相关属性字体与文本相关属性10.1 10.1 给文字添加阴影给文字添加阴影text-shadowtext-shadow属性属性10.1.1
2、 text-shadow属性的使用方法10.1.2 指定多个阴影10.1.1 text-shadow10.1.1 text-shadow属性的使用方法属性的使用方法 字体相关属性中提供了一个text-shadow属性，该属性在CSS 2.0中被引入，CSS 2.1删除了该属性，CSS3.0再次引入了该属性。该属性的值如下：pColor：指定颜色。pLength：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。pLengt：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。pOpacity：由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作
3、用距离。如果仅仅需要模糊效果，将前两个length全部设定为0。【例例10-110-1】下面的一个实例，展示了设置阴影的几个参数的意义：阴影 spandisplay:block;padding: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
4、2px gray（向右上角投影）：明日科技MRtext-shadow:5px 5px 2px gray（向右下角投影）：明日科技MRtext-shadow:15px 15px 2px gray（向右下角投影、更大偏移距）：明日科技MRtext-shadow:5px 5px 10px gray（模糊半径增加，模糊程度加深）：明日科技MR 从上面代码可以看出，通过改变横向与纵向的距离，来控制阴影向哪个方向投影、投影的偏移距离。在浏览器中浏览该页面，可以看到如图10-1所示的效果。图10-1 为文字设置阴影 可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。指定多
5、个阴影时使用逗号将多个阴影进行分割。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器支持该功能。【例例10-210-2】下面来看一个指定多个阴影的实例，在该实例中为文字依次指定了红色、蓝色及绿色阴影，同时也为这些阴影指定了适当的位置，其实现的代码如下：指定多个阴影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.1.2 指定多个阴影指定多个阴影
6、在浏览器中浏览该页面，可以看到如图10-2所示的效果。图10-2 指定多个阴影10.2 10.2 文本相关属性文本相关属性10.2.1 文本自动换行：word-break10.2.2 长单词和URL地址换行 当HTML元素不足以显示它里面的所有文本时，浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。有些时候，希望让浏览器可以在西方文字的单词中间换行，此时可借助于word-break属性。如果把word-break属性设为break-all，即可让浏览器
7、在单词中间换行。【例例10-310-3】本实例演示了word-break属性的功能。程序代码如下：文本相关属性设置/*为div元素增加边框*/divborder:1px solid#000000;height:60px;width:200px;word-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 10.2.1 文
8、本自动换行：文本自动换行：word-breakword-break 上面页面中第二个元素设置了word-break:break-all，这意味着允许该里的内容在单词中换行。使用浏览器浏览该页面，将看到如图10-3所示的效果。图10-3 在单词中换行说明：到目前为止，Firefox和Opera两个浏览器都不支持word-break属性，而Internett Explorer、Safari、Chrome都支持该属性。对于西方文字来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器不能给较长的单词自动换行。当浏览器窗口比较窄的时候，文字会超出浏览器的窗口，浏览器下部出现滚动条，让用户通过拖动滚
9、动条的方法来查看没有在当前窗口显示的文字。但是，这种比较长得单词出现的机会不时很大，而大多数超出当前浏览器窗口的情况是出现在显示比较长的URL地址的时候。因为在URL地址中没有半角空格，所以当URL地址中没有连字符的时候，浏览器在显示时是将其视为一个比较长得单词来进行显示的。在CSS 3中，使用word-wrap属性来实现长单词与URL地址的自动换行。该属性可以使用的属性值为normal与break-word两个。使用normal属性值时浏览器保持默认处理，只在半角空格或连字符的地方进行换行。使用break-word时浏览器可再长单词或URL地址内部进行换行。10.2.2 10.2.2 长单词
10、和长单词和URLURL地址换行地址换行【例例10-410-4】本实例演示了word-wrap属性的功能，其代码如下：文本相关属性设置/*为div元素增加边框*/divborder:1px solid#000000;height:55px;width:140px;word-wrap:normal Our domain is http:/word-wrap:break-word Our domain is http:/在浏览器中浏览该页面，可以看到如图10-4所示的效果。图10-4 在URL地址中换行需要指出的是，word-break与word-wrap属性的作用并不相同，它们的区别如下：pwor
11、d-break：将该属性设为break-all，可以让组件内每一行文本的最后一个单词自动换行。pword-wrap：该属性会尽量让长单词、URL地址不要换行。即使将该属性设为break-word，浏览器也会尽量让长单词、URL地址单独占用一行，只有当一行文本都不足以显示这个长单词、URL地址时，浏览器才会在长单词、URL地址的中间换行。10.3 CSS 310.3 CSS 3新增的服务器字体新增的服务器字体10.3.1 使用服务器字体10.3.2 定义粗体、斜体字10.3.3 优先使用客户端字体 使用服务器字体非常简单，只要使用font-face定义服务器字体即可。font-face的语法格式
12、如下：font-facefont-family:name;src:url(url)format(fontformat);font-weight:normal;上面的语法格式中的font-family属性值用于指定该服务器字体的名称，这个名称可以随意定义；src属性中通过url指定该字体的字体文件的绝对或相对路径；format则用于指定该字体的字体格式，到目前为止，服务器字体还只支持TrueType格式（对应于*.ttf字体文件）和OpenType格式（对应于*.otf字体文件）。使用服务器字体的步骤如下：（1）下载需要使用的服务器字体对应的字体文件。（2）使用font-face定义服务器字体。
13、（3）通过font-family属性指定使用服务器字体10.3.1 10.3.1 使用服务器字体使用服务器字体 【例例10-510-5】本实例演示了如何使用服务器字体。本例具体的实现过程是：首先是定义服务器字体：Tahoma，该字体对应的字体文件是BAUHS93.ttf（该字体文件必须放在与本实例的index.html相同的路径下），并指定该字体是TrueType字体格式；接下来通过style属性指定元素使用Tahoma字体。其具体的实现代码如下：服务器字体/*定义服务器字体，字体名为Tahoma服务器字体对应的字体文件为BAUHS93.ttf*/font-face font-family:T
14、ahoma;src:url(BAUHS93.ttf)format(TrueType);My love is http:/在浏览器中浏览该页面，将看到如图10-5所示的效果。图10-5 使用服务器字体实例 在网页上指定字体时，除了可以指定特定字体之外，还可以指定使用粗体字、斜体字，但在使用服务器字体时，需要为粗体、斜体、粗斜体使用不同的字体文件（需要相应地下载不同的字体文件，下载地址为：http:/www.josbuivenga.demon.nl/fontinsans.html）。【例例10-610-6】本实例演示了如何定义粗体、斜体、粗斜体的设置，具体步骤是：首先定义了4个名为CrazyIt的
15、服务器字体，分别代表了普通、粗体、斜体、粗斜体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(OpenType);font-weight:bold;10.3.2
16、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:/http:/在浏览器中浏览该页面，将看到如图
17、10-6所示的效果。图10-6 粗体、斜体、粗斜体的服务器字体 虽然CSS 3提供了服务器字体功能，但在开发时也不能经常使用服务器字体，因为用服务器字体需要从远程服务器下载字体文件，因此效率并不好。因此，应该尽量考虑使用浏览者的客户端字体。只有当客户端不存在这种字体时，才考虑使用服务器字体作为替代方案，CSS 3也为这种方案提供了支持。CSS 3使用font-face定义服务器字体时，src属性除了可以使用url来指定服务器字体的路径之外，也可以使用local指定客户端字体名称。体文件，下载地址为：http:/www.josbuivenga.demon.nl/fontinsans.html）。
18、10.3.3 10.3.3 优先使用客户端字体优先使用客户端字体 【例例10-710-7】下面是使用font-face属性显示客户端字体的一个实例，在该实例中，定义CrazyIt服务器字体，指定src属性时，优先使用local(“Arial”)客户端字体；当客户端不存在这种字体时，url(“Fontin_Sans_I_45b”)字体会作为替代字体。其实现的代码如下：优先使用客户端字体/*定义服务器字体：CrazyIt该字体优先使用客户端字体：Arial当客户端字体不存在时，使用Fontin_Sans_I_45b.ttf作为替代字体。*/font-face font-family:CrazyIt
19、;src:local(Arial),url(Fontin_Sans_I_45b)format(TrueType);My love is http:/在浏览器中浏览该页面（假设客户端存在Arial字体），将可以看到如图10-7所示的效果。图10-7 font-face属性显示客户端字体10.4 10.4 使用使用font-size-adjustfont-size-adjust属性微调属性微调字体大小字体大小10.4.1 字体不同导致文字大小的不同10.4.2 font-size-adjust属性的使用方法10.4.3 font-size-adjust属性的使用示例【例例10-810-8】首先，来
20、看一个实例，在该实例中有4个div元素，每个div元素的字体都设定为16个像素，但是字体全都不一致，导致页面上显示出来的文字大小也不相同，其实现的代码如下：字体不同导致文字大小不同的示例div#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 m
21、eYou and me10.4.1 10.4.1 字体不同导致文字大小的不同字体不同导致文字大小的不同这段代码的运行结果如图10-8所示图10-.8 字体不同导致文字大小不同的示例 由此可见，如果更改了字体的种类，很可能会因为文字大小的变化而导致原来的页面布局产生混乱。字体种类aspect值Verdana0.58Comic Sans MS0.54Trebuchet MS0.53Georgia0.5Myriad Web0.48Minion Web0.47Times New Roman0.46Gill Sans0.46Bernhard Modern0.4Caflish Script Web0.37
22、Fjemish Script0.28 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值是指使用这个字体书写出来的小写x的高
23、度（像素为单位）。如果某个字体的尺寸为100px时，x-height值为58像素，则该字体的aspect值为0.58，因为字体的x-height的值总是随着字体的尺寸一起改变的，所以字体的aspect值都是一个常数。表10-1所示为一些常用的西方字体的aspect值。表10-1 常用字体的aspect值10.4.2 font-size-adjust10.4.2 font-size-adjust属性的使用方法属性的使用方法 【例例10-910-9】本实例中有3个div元素，其中一个div元素的字体使用Comic Sans MS字体，另两个div元素的字体使用Times New Roman字体。代
24、码如下：font-size-adjust属性的使用示例div#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
25、-size-adjust10.4.3 font-size-adjust属性的使用示例属性的使用示例这段代码的运行结果如图10-9所示。图10-9 font-size-adjust属性的使用示例 在网页设计时，经常会设计各种实用的文本效果，通过这些文本效果给网页增加一定的色彩，本实例中使用text-shadow属性设计立体文本，效果如图10-10所示。图10-10 立体文本10.5 10.5 综合实例综合实例设计立体文本设计立体文本 实现本实例时，主要是使用text-shadow属性给文字指定多个阴影，并且针对每个阴影使用不同的颜色。指定多个阴影时使用逗号将多个阴影进行分割，在这里通过在文本的左
26、上和右下各添加一个1像素的错位补色来实现的一种淡淡的立体效果。代码参考如下：设计立体文本p text-align:center;padding:24px;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-a
27、ll，可以让组件内每一行文本的最后一个单词自动换行。（3）在CSS 3中，使用word-wrap属性来实现长单词与URL地址的自动换行，该属性可以使用的属性值为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中微调字体大小时，需要使用什么属性？习题