120◆第8章柔化视觉体验让我们继续使用这个过滤器定义info区域背景色的透明度。8.2.9透明度渐变过滤器可以在起点和终点的颜色码上增加一个额外的十六进制值，使用开始的两位定义透明度。下面的代码实现的效果与我们想要的极为类似：Downl o ad   css3banner/filters.cssbackground: none;filter:progid:DXImageTransform.Microsoft.gradient(  startColorStr=#BBFFFFFF, endColorStr=#BBFFFFFF);-ms-filter: "progid:DXImageTransform.Microsoft.gradient( startColorStr='#BBFFFFFF', EndColorStr='#BBFFFFFF') i, ;这8位十六进制颜色码与rgba函数很类似，只是透明度值放在了最前面而不是最后面。因此，它们的顺序是透明度、红色、绿色和蓝色。我们需要移走元素上的背景属性(background)，使其兼容IE7。如果大家已经跟着上述过程创建了样式表，就会发现上面的代码还无法正常显示，后而我们会解决这个问题。8.2.10整合在IE浏览器里使用这些过滤器的一个更大的困难是，无法分开定义它们。要对一个元素定义多个过滤器，我们必须将多个过滤器定义为一个以逗号分隔的列表。下面就是IE浏览器中样式表的实际组织方式：Download css3banner]ie.css#info{ background: none;filter:progid:DXImageTransform.Microsoft.gradient(    startColorStr=#BBFFFFFF, endColorStr=#BBFFFFFF  ); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(   startColorStr='#BBFFFFFF', EndColorStr=I#BBFFFFFFI )";}#badge{filter:progid:DXImageTransform.Microsoft.Matrix(8.2实例18：使用阴影、渐变和变换●121sizingMethod='auto expand',M11=0.9914448613738104,M12=0.13052619222005157,M21=-0.13052619222005157,M22=0.9914448613738104),progid:DXImageTransform.Microsoft.gradient(  startColorStr=#FFFFFF, endColorStr=#EFEFEF),progid:DXImageTransform.Microsoft.Shadow( color=#333333, Direction=135, Strength=3);-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.9914448613738104,M12=0.13052619222005157,M21=-0.13052619222005157,M22=0.9914448613738104 ),progid:DXImageTransform.Microsoft.gradient(   startColorStr=#FFFFFF, endColorStr=#EFEFEF ),progid:DXImageTransform.Microsoft.Shadow(  color=#333333, Direction=135, Strength=3  ) II ;    殉了得到预期的效果，加了好多代码。但事实证明，这些属性是可用的。观察图8-5，会发现已经很接近我们期望的效果了。剩下需要做的仅仅是将info区域圆角化，可以参考8.1节查看如何实现。图8-5   Internet Explorer8中的横幅广告    尽管这些过滤器比较笨重，还有一点点古怪，但是为了给IE用户提供几乎一致的用户体验，在以后的项目中我们还会经常使用它们。    请注意，本节中谈论的一些效果都是介绍性的，当我们创建初始的样式表时，需要确保定义了背景色，以确保文字的可读性。这样的话，即使浏览器无法解析CSS3语法，仍可以显示页面并使其具有可读性。122◆第8章柔化视觉体验8.3  实例19:使用实用的字体    排版风格对用户体验来说非常重要。济南网页设计公司网站的字体也是精挑细选的，是由懂得如何选用合适字体及合适间距的专家认真选取后确定下来的，目的在于使读者获得轻松的阅览体验。这些对于网站来说同样重要。    在向读者传递信息时，我们选取的字体会影响到读者对信息的理解。图8-6所示的字体非常适合一支热情的重金属乐队。但是作为本书的封面字体就不太合适了，如图8-7所示。    由此可以看出，选择适合于文章内容的字体真的非常重要。Web上字体的缺点是开发者可选择的余地太少，只有少量字体可用，俗称“websafe”字体。这些字体都是在大多数用户操作系统中被广泛使用的字体。    要解决这个问题，我们通常会将字体做成图片，然后直接加入到页面中或者通过CSS的方法将其当做背景图片或者sIFR。，使用Flash渲染字体。CSS3的字体模块提供了更好的实现方式。8.3.1  @font-face  @font-face指令实际上是在CSS2规范中引入的，并得到了Internet Explorer 5的支持。然而，微软的实现方式是使用一种叫做EmbeddedOpenType (EOT)昀字体格式，而现在大部分字体都是TrueType或者OpenType格式。当前的其他浏览器都支持Open Type和True Typep字体。字体和版权    有些字体是收费的，像使用商业图片或者其他受版权保护的资料一样，需要获得版权和许可才可以在自己的网站上使用。如果购买了某套字体，需要在权利范围之内使用在自己网站的logo或者图片上。这叫做使用许可(usage right)。然而，@font-face带来了一种不同的版权管理方式——分发权利。①参见 http://www.mikeindustries.com/blog/sifr。8.3实例19：使用实用的字体●123    当在页面上嵌入一种字体时，用户就需要下载该字体，意味着你的网站正在分发字体给别人。你需要确认正在使用的字体版权绝对允许这样做。    Typekit4有含很多字体的带有版权的字体库，并提供工具和代码让我们能轻松地将字体集成到自己的网站中。但是他们不免费提供服务，不过如果我们需要使用某种字体，其收费是非常便宜的。    Google提供了Googe Font API1，与Typekit类似，但是它仅提供开源字体。    这些服务都是通过JavaScript加载字体，因此需要开发者注意，要保证禁用JavaScript的用户页面的可读性。只要记得一点，对待字体要如同对待其他资产一样，这样就不会遇到任何麻烦了。* http://www.typekit.com/。t http://code.google.com/apis/webfonts/。    AwesomeCo的销售主管要求对公司的印刷品和网站使用统一的字体。网站需要引入一种免费的简单字体Garogier。作为一次试验，我们会将这一字体应用于2.1节中创建的博客示例上。这样，大家就可以看到该字体的实例应用了。8.3.2字体格式    字体拥有多种梏式，目标浏览器会决定将什么格式的字体呈现给用户。格式及浏览器支持情况口 Embedded OpenType (EOT)  [IE5-8]