HTML5应用开发和 与实践课件第10章CSS字体和 与文本相关属性.ppt

/* 定义斜体的服务器字体 */ @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属性显示客户端字体 Logo Logo Logo Logo Logo Logo Logo Logo Logo Logo 本章要求： 第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属性的使用方法