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]