第10章CSS字体与文本相关属性.pptVIP

/* 定义斜体的服务器字体 */ @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; } /style /head body div style=font-family:CrazyIt;font-size:30pt /div div style=font-family:CrazyIt;font-size:30pt;font-weight:bold /div div style=font-family:CrazyIt;font-size:30pt;font-style:italic; /div div style=font-family:CrazyIt;font-size:30pt;font-weight:bold ;font-style:italic; /div /body /html 在浏览器中浏览该页面，将看到如图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”)字体会作为替代字体。其实现的代码如下： !DOCTYPE html html head meta http-equiv=Content-Type content=text/html; charset=GBK / title 优先使用客户端字体 /title style type=text/css /* 定义服务器字体：CrazyIt 该字体优先使用客户端字体：Arial 当客户端字体不存在时，使用Fontin_Sans_I_45b.ttf作为替代字体。 */ @font-face { font-family: CrazyIt; src: local(Arial), url(Fontin_Sans_I_45b) format(TrueType); } /style /head body div style=font-family:CrazyIt;font-size:24pt My love is /div /body /html 在浏览器中浏览该页面（假设客户端存在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个像素，但是字体全都不一致，导致页面上显示出来的文字大小也不相同，其实现的代码如下： !DOCTYPE html html head meta http-equiv=Content-Type content=text/html; charset=GBK / title字体不同导致文字大小不同的示例/title /head style type=text/css div#div1 font-fa