CSS字体与文本相关属性.ppt

,本章要求：,第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属性的使用方法,字体相关属性中提供了一个text-shadow属性，该属性在CSS 2.0中被引入，CSS 2.1删除了该属性，CSS3.0再次引入了该属性。该属性的值如下： Color：指定颜色。 Length：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的水平延伸距离。 Lengt：由浮点数字和单位标识符组成的长度值。可为负值。指定阴影的垂直延伸距离。 Opacity：由浮点数字和单位标识符组成的长度值。不可为负值。指定模糊效果的作用距离。如果仅仅需要模糊效果，将前两个length全部设定为0 。,【例10-1】 下面的一个实例，展示了设置阴影的几个参数的意义： 阴影 span display: block; padding: 8px; font-size:xx-large; text-shadow:red 5px 5px 2px： 明日科技MR text-shadow:5px 5px 2px（省略阴影颜色）： 明日科技MR text-shadow:-5px -5px 2px gray（向左上角投影）： 明日科技MR text-shadow:-5px 5px 2px gray（向左下角投影）： 明日科技MR text-shadow:5px -5px 2px gray（向右上角投影）： 明日科技MR text-shadow:5px 5px 2px gray（向右下角投影）： 明日科技MR text-shadow:15px 15px 2px gray（向右下角投影、更大偏移距）： 明日科技MR text-shadow:5px 5px 10px gray（模糊半径增加，模糊程度加深）： 明日科技MR ,从上面代码可以看出，通过改变横向与纵向的距离，来控制阴影向哪个方向投影、投影的偏移距离。在浏览器中浏览该页面，可以看到如图10-1所示的效果。 图10-1 为文字设置阴影,可以使用text-shadow属性来给文字指定多个阴影，并且针对每个阴影使用不同颜色。指定多个阴影时使用逗号将多个阴影进行分割。到目前为止，只有Firefox浏览器、Chrome浏览器及Opera浏览器支持该功能。 【例10-2】 下面来看一个指定多个阴影的实例，在该实例中为文字依次指定了红色、蓝色及绿色阴影，同时也为这些阴影指定了适当的位置，其实现的代码如下： 指定多个阴影 div text-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-break 10.2.2 长单词和URL地址换行,当HTML元素不足以显示它里面的所有文本时，浏览器会自动换行显示它里面的所有文本。浏览器默认换行规则是，对于西方文字来说，浏览器只会在半角空格、连字符的地方进行换行，不会在单词中间换行；对于中文来说，浏览器可以在任何一个中文字符后换行。 有些时候，希望让浏览器可以在西方文字的单词中间换行，此时可借助于word-break属性。如果把word-break属性设为break-all，即可让浏览器在单词中间换行。 【例10-3】 本实例演示了word-break属性的功能。程序代码如下： 文本相关属性设置 /* 为div元素增加边框 */ div border: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 文本自动换行：word-break,上面页面中第二个元素设置了word-break:break-all，这意味着允许该里的内容在单词中换行。使用浏览器浏览该页面，将看到如图10-3所示的效果。 图10-3 在单词中换行 说明： 到目前为止，Firefox和Opera两个浏览器都不支持word-break属性，而Internett Explorer、Safari、Chrome都支持该属性。,对于西方文字来说，浏览器在半角空格或连字符的地方进行换行。因此，浏览器不能给较长的单词自动换行。当浏览器窗口比较窄的时候，文字会超出浏览器的窗口，浏览器下部出现滚动条，让用户通过拖动滚动条的方法来查看没有在当前窗口显示的文字。 但是，这种比较长得单词出现的机会不时很大，而大多数超出当前浏览器窗口的情况是出现在显示比较长的URL地址的时候。因为在URL地址中没有半角空格，所以当URL地址中没有连字符的时候，浏览器在显示时是将其视为一个比较长得单词来进行显示的。 在CSS 3中，使用word-wrap属性来实现长单词与URL地址的自动换行。该属性可以使用的属性值为normal与break-word两个。使用normal属性值时浏览器保持默认处理，只在半角空格或连字符的地方进行换行。使用break-word时浏览器可再长单词或URL地址内部进行换行。,10.2.2 长单词和URL地址换行,【例10-4】 本实例演示了word-wrap属性的功能，其代码如下： 文本相关属性设置 /* 为div元素增加边框 */ div border:1px solid #000000; height: 55px; width:140px; word-wrap:normal Our domain is word-wrap:break-word Our domain is ,在浏览器中浏览该页面，可以看到如图10-4所示的效果。 图10-4 在URL地址中换行 需要指出的是，word-break与word-wrap属性的作用并不相同，它们的区别如下： word-break：将该属性设为break-all，可以让组件内每一行文本的最后一个单词自动换行。 word-wrap：该属性会尽量让长单词、URL地址不要换行。即使将该属性设为break-word，浏览器也会尽量让长单词、URL地址单独占用一行，只有当一行文本都不足以显示这个长单词、URL地址时，浏览器才会在长单词、URL地址的中间换行。,10.3 CSS 3新增的服务器字体,10.3.1 使用服务器字体 10.3.2 定义粗体、斜体字 10.3.3 优先使用客户端字体,使用服务器字体非常简单，只要使用font-face定义服务器字体即可。font-face的语法格式如下： font-face font-family:name; src:url(url) format(fontformat); font-weight:normal; 上面的语法格式中的font-family属性值用于指定该服务器字体的名称，这个名称可以随意定义；src属性中通过url指定该字体的字体文件的绝对或相对路径；format则用于指定该字体的字体格式，到目前为止，服务器字体还只支持TrueType格式（对应于*.ttf字体文件）和OpenType格式（对应于*.otf字体文件）。 使用服务器字体的步骤如下： （1）下载需要使用的服务器字体对应的字体文件。 （2）使用font-face定义服务器字体。 （3）通过font-family属性指定使用服务器字体,10.3.1 使用服务器字体,【例10-5】 本实例演示了如何使用服务器字体。本例具体的实现过程是：首先是定义服务器字体：Tahoma，该字体对应的字体文件是BAUHS93.ttf（该字体文件必须放在与本实例的index.html相同的路径下），并指定该字体是TrueType字体格式；接下来通过style属性指定元素使用Tahoma字体。其具体的实现代码如下： 服务器字体 /* 定义服务器字体，字体名为Tahoma 服务器字体对应的字体文件为BAUHS93.ttf */ font-face font-family: Tahoma; src: url(“BAUHS93.ttf“) format(“TrueType“); My love is ,在浏览器中浏览该页面，将看到如图10-5所示的效果。 图10-5 使用服务器字体实例,在网页上指定字体时，除了可以指定特定字体之外，还可以指定使用粗体字、斜体字，但在使用服务器字体时，需要为粗体、斜体、粗斜体使用不同的字体文件（需要相应地下载不同的字体文件，下载地址为：http:/www.josbuivenga.demon.nl/fontinsans.html）。 【例10-6】 本实例演示了如何定义粗体、斜体、粗斜体的设置，具体步骤是：首先定义了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(“OpenType“); 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; ,在浏览器中浏览该页面，将看到如图10-6所示的效果。 图10-6 粗体、斜体、粗斜体的服务器字体,虽然CSS 3提供了服务器字体功能，但在开发时也不能经常使用服务器字体，因为用服务器字体需要从远程服务器下载字体文件，因此效率并不好。因此，应该尽量考虑使用浏览者的客户端字体。只有当客户端不存在这种字体时，才考虑使用服务器字体作为替代方案，CSS 3也为这种方案提供了支持。 CSS 3使用font-face定义服务器字体时，src属性除了可以使用url来指定服务器字体的路径之外，也可以使用local指定客户端字体名称。 体文件，下载地址为：http:/www.josbuivenga.demon.nl/fontinsans.html）。,10.3.3 优先使用客户端字体,【例10-7】 下面是使用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(“TrueType“); My love is ,在浏览器中浏览该页面（假设客户端存在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个像素，但是字体全都不一致，导致页面上显示出来的文字大小也不相同，其实现的代码如下： 字体不同导致文字大小不同的示例 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 me You and me You and me You and me ,10.4.1 字体不同导致文字大小的不同,这段代码的运行结果如图10-8所示 图10-.8 字体不同导致文字大小不同的示例 由此可见，如果更改了字体的种类，很可能会因为文字大小的变化而导致原来的页面布局产生混乱。,font-size-adjust属性的使用方法很简单，但是它需要使用每个字体种类自带的一个aspect值（比例值）。font-size-adjust属性的使用方法类似如下，其中0.46为Times New Roman字体的aspect值。 div font-size:16px; font-family:Times New Roman; font-size-adjust:0.46; aspect值可以用来在将字体修改为其他字体时保持字体大小基本不变，这个aspect值的计算方法为x-height值除以该字体的尺寸，x-height值是指使用这个字体书写出来的小写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#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 www.mingribook .com Our domain is Our domain is ,10.4.3 font-size-adjust属性的使用示例,这段代码的运行结果如图10-9所示。 图10-9 font-size-adjust属性的使用示例,在网页设计时，经常会设计各种实用的文本效果，通过这些文本效果给网页增加一定的色彩，本实例中使用text-shadow属性设计立体文本，效果如图10-10所示。 图10-10 立体文本,10.5 综合实例设计立体文本,实现本实例时，主要是使用text-shadow属性给