《Windows 8 开发权威指南：HTML5 和JavaScript卷》——2.3 IE10与CSS3_数据库_weixin

本节书摘来自异步社区《Windows 8 开发权威指南：HTML5 和JavaScript卷》一书中的第2章，第2.3节，作者：尹成 , 李亚男 , 王腾 , 丁宽帅 , 尹子磊著，更多章节内容可以访问云栖社区“异步社区”公众号查看

2.3 IE10与CSS3

2.3.1 使用CSS3添加圆角
通过使用CSS3（级联样式表Level 3）为布局元素生成圆角，可以美化网站的外观。本小节我们主要通过使用Internet Explorer 9对圆角的内建支持，学习使网站布局更具吸引力的一些基本方法。我们主要通过以下几部分进行说明：

起点

生成全部相同的圆角

分别生成多个圆角

使用椭圆生成圆角

1．起点
我们从基本的网页开始操作，图2-1所示的网页为一家虚拟咖啡公司的初始网页，其中包括一些HTML元素、一些级联样式表和几个图像。

说明

（1）当你创建自己的网页以利用Internet Explorer 9中引入的新Web标准支持时，确保在页面的顶部包含以下指令：< !DOCTYPE html>。这会确保Internet Explorer 9使用最新标准“Internet Explorer 9标准模式”呈现页面。

（2）与许多其他布局一样，在此网页的布局中，框有助于以可视方式分隔内容，并提供视觉吸引力。同样的，此布局完全是平直的。不过，利用Internet Explorer 9和CSS3可以为这些框生成圆角。

（3）我们将重点说明图中的3个区域：咖啡豆缩略图的边界（由product_thumb类选择器定义）、页面右边的边栏（由sidebar ID选择器定义）、沿着页面顶部和底部的黄色标题条带（由header和footer ID选择器定义）。
screenshot

2．生成全部相同的圆角
我们将从咖啡豆缩略图开始操作。若要均等地使矩形的所有角平滑，需要使用一个带有值的border-radius属性（该值可以是一个长度值或一个百分比，百分比基于总高度或宽度）。通过指定框的每个角的形状的圆圈半径来使用此属性，是一种最简单的形式。如图 2-2所示，对矩形应用了20px的border-radius。

screenshot

通过以上的介绍，我们已经了解了如何使用border-radius属性。下面我们继续讲解例子。

在没有添加圆角之前，定义咖啡豆缩略图外观的CSS类选择器代码如下，其效果如图2-3所示。
screenshot

.product_thumb{
   clear: left;
   height: 80px;
   width: 80px;
   margin-right: 10px;
   padding: 5px;
   float: left;
   border-width: 1px;
   border-color: #7f7f7f;
   border-style: dashed;
}

下面添加border-radius属性并为其分配一个5px的值，在product_thumb类选择器中添加“border-radius:5px;”得到新的类选择器代码如下，其效果如图2-4所示。

screenshot

图2-4 运行效果

.product_thumb{
   clear: left;
   height: 80px;
   width: 80px;
   margin_right: 10px;
   padding: 5px;
   float: left;
   border-width: 1px;
   border-color: #7f7f7f;
   border-style: dashed;
   border-radius: 5px;
}

通过前后的对比，可以非常明显地看出我们为咖啡豆缩略图的边界添加了4个相同的圆角。

3．分别生成多个圆角
在生成多个圆角之前，我们需要先学习以下几个属性。

（1）border-top-left-radius：定义矩形的左上角。

（2）border-top-right-radius：定义矩形的右上角。

（3）border-bottom-left-radius：定义矩形的左下角。

（4）border-bottom-right-radius：定义矩形的右下角。

另外，我们也可以使用border-radius属性作为一个速记属性来单独平滑边界的各个角，如果你为border-radius属性输入多个值，则每个角的曲线将根据值的顺序而发生变化。其表示形式如下：

border-radius: ul ur lr ll;

ul表示左上角，ur表示右上角，lr表示右下角，ll表示左下角。上述任何一个值为零都意味着未生成任何曲线，角仍为直角。

下面我们将利用讲到的第一种方式来生成多个圆角，对于第二种方式你可以根据书中的讲解自己去尝试。

在添加圆角之前，定义边栏外观的CSS的ID选择器代码如下，其效果如图 2-5所示。

screenshot

#sidebar{
   font-size: 12px;
   padding: 15px;
   margin: 20px 0px 10px 75%;
   border-style: dashed;
   border-color: #996600;
   border-width: 5px;
}

添加了圆角之后，定义边栏外观的CSS的ID选择器及其效果发生了很大的变化，代码如下所示，效果如图2-6所示。

screenshot

图2-6 运行效果

#sidebar{
   font-size: 12px;
   padding: 15px;
   margin: 20px 0px 10px 75%;
   border-style: dashed;
   border-color: #996600;
   border-width: 5px;
   border-top-left-radius: 10em;
   border-bottom-right-radius: 5em;
   border-bottom-left-radius: 2em;
}

4．使用椭圆生成圆角
之前，我们仅使用了由圆圈定义的圆角，border-radius属性还可以创建由具有不同的x（水平）和y（垂直）半径的椭圆定义的角。

与生成多个圆角类似，利用椭圆生成圆角我们也有两种方法。

（1）对于所有单个的border-radius属性，第一个值等于定义角的椭圆的水平半径，第二个值等于垂直半径。图2-7形象地说明了各个值的意义。

screenshot

（2）可以使用border-radius属性作为速记属性来定义椭圆的半径，其意义如图2-8所示。

screenshot

图2-8 各属性的意义

学习了以上知识点，我们开始使用椭圆来生成由header ID选择器定义的框的两个顶部圆角，以及由footer ID选择器定义的框的两个底部圆角。

我们需要使用椭圆来定义header的左上角和右上角以及footer的左下角和右下角，因此向header选择器中添加下面两行代码：

border-top-left-radius: 50px 25px;

border-top-right-radius: 50px 25px;
向footer选择器中添加下面两行代码：

border-bottom-left-radius: 15px 30px;

border-botttom-right-radius: 15px 30px;
添加了以上代码后页面就变得更加美观了，如图2-9所示。

screenshot

2.3.2 使用CSS3添加投影
本小节我们将要介绍如何使用IE 9和CSS3向布局元素的外部或内部添加投影，当然我们也可以使用IE 9中新提供的圆角支持所创建的圆角曲线添加阴影。

1．方框阴影选项和语法
投影通过box-shadow属性启用。像圆角一样，IE 9中的投影功能非常强大，你有多个可以指定的选项。box-shadow属性中值的顺序如下：

box-shadow: hoff voff bd sd color inset;
下面分别对各个值表示的意义进行介绍。

（1）hoff（horizontal offset），此长度值是必需的。它指定阴影向右（正值）或向左（负值）延伸的距离。

（2）voff（vertical offset），此长度也是必需的。它指定阴影向下（正值）或向上（负值）延伸的距离。以上两个参数的视觉解释如图 2-10所示。

screenshot

（3）bd（blur distance），此长度值表示阴影边缘的模糊程度，即模糊起点和终点之间大约的距离。值越高越模糊。有关此参数的视觉解释如图2-11所示，这里我们将模糊距离bd设置为30px。

screenshot

图 2-11 视觉解释

（4）sd（spread distance），此长度值指示阴影形状在各个方向的扩展（正值）或收缩（负值）的程度，表示在各个方向将延伸超过原始尺寸的距离。视觉效果请看图2-12，sd表示扩散距离，设置为30px。原始偏移边框形状显示为虚线，以便更好地显现从原始偏移边框开始的扩散。

screenshot

（5）color，此CSS颜色值指示阴影的颜色。

（6）inset，如果使用此关键字，它会将投影从外部阴影更改为内部阴影。形成与（2）相反的效果。

2．创建基本投影
从方框延伸几像素、带有轻微模糊的灰色阴影可能是最简单也是最常见的投影。我们接下来将这个投影应用于我们从2.3.1中得到的咖啡公司的主页，通过向其页眉和页脚添加轻微的阴影，使其在视觉上更生动有趣。

我们以对页眉的操作为例进行说明。

在添加投影之前header ID选择器代码如下，其效果如图 2-13所示。

screenshot

图 2-13 运行效果

#header{
   padding-top: 10px;
   background-color: #FFFCC;
   border-top-left-radius: 50px 30px;
   border-top-right-radius: 50px 30px;
}

在添加投影之后header ID选择器代码如下，其效果如图 2-14所示。

screenshot

#header{
   padding-top: 10px;
   background-color: #FFFCC;
   border-top-left-radius: 50px 30px;
   border-top-right-radius: 50px 30px;
   box-shadow: 5px 5px 5px lightgray;
}

3．使用投影创建“发光”效果
只需要将box-shadow属性中的前两个值设置为零，即可给方框添加“发光”效果。

下面我们以咖啡缩略图为例进行说明。

在设置box-shadow属性之前product_thumb类选择器的CSS代码如下，其效果如图2-15所示。

screenshot

.product_thumb{
   clear: left;
   height: 80px;
   width: 80px;
   margin-right: 10px;
   padding: 5px;
   float: left;
   border-width: 1px;
   border-style: dashed;
   border-color: #7f7f7f;
   border-radius: 5px;
}

在设置box-shadow属性之后product_thumb类选择器的CSS代码如下，其效果如图 2-16所示。

screenshot

.product_thumb{
   clear: left;
   height: 80px;
   width: 80px;
   margin-right: 10px;
   padding: 5px;
   float: left;
   border-width: 1px;
   border-style: dashed;
   border-color: #7f7f7f;
   border-radius: 5px;
   box-shadow: 0 0 5px 5px sienna;
}

从前后的变化可以看出，通过设置发光效果，可以使网站具有更好的视觉效果。

2.3.3 使用CSS3创建酷炫十足的按钮
通过使用CSS3，只需稍作标记，即可创建外观极具吸引力的按钮。本小节我们介绍如何通过CSS将简单的超链接转换为酷炫十足的按钮。

1．起点
这里，我们仍然以咖啡公司的首页为例，为棕色订单信息水平栏中每个产品描述后的“Order Now！”超链接编程。在没有进行任何处理时，其类选择器product_orderinfo代码如下，效果如图2-17所示。
screenshot

.product_orderinfo{
   text-align: right;
   display: block;
   padding: 5px;
   font-size: 11px;
   font-weight: bold;
   color: white;
   background-color: #996633;
}

首先，我们将“Order Now！”超链接变成一个矩形按钮。为了很好地与其他设计部分进行对比，我们将此按钮设为蓝色。我们还增加订单信息栏高度，以便容纳更大的按钮。基本按钮的CSS代码如下，其效果如图2-18所示。
screenshot

.product_orderinfo a{
   color: white;
   display: inline-block;
   padding: 5px 10px;
   text-decoration: none;
   font-weight: bold;
   margin: 3px;
   background: #000099;
}

我们还将添加以下选择器，以便当光标悬停在此按钮上时使其变成棕色，代码如下，效果如图 2-19所示。

screenshot

.product_orderinfo a:hover{
   background: #663300;
}

接下来，我们将使用CSS3令此按钮熠熠生辉！

2．添加圆角
首先，我们为此按钮添加半径为5px的圆角。我们通过向选择器product_ordernifo a中添加boder-radius属性并为其赋值5px完成此工作。为了确保其他常用浏览器也能显示圆角，我们还将添加几个vender-prefixed属性。

添加圆角后的product_orderinfo a选择器代码如下所示，其效果如图 2-20所示。

screenshot

在效果图中，可以很明显地看出“Order Now！”按钮的矩形框变得圆滑了。

.product_orderinfo a{
   color: white;
   display: inline-block;
   padding: 5px 10px;
   text-decoration: none;
   font-weight: bold;
   margin: 3px;
   background: #000099;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

3．添加阴影
然后，我们将向此按钮添加阴影。我们通过将box-shadow属性添加到选择器来执行此操作。对于此按钮，我们将hoff（水平偏移）和voff（垂直偏移）指定为1px，将bd（模糊距离）指定为3px，将color（颜色）设置为灰色（十六进制值#999999）。为了确保其他常用浏览器也能正常显示阴影，我们还将添加几个vendor-prefixed属性。

添加box-shadow属性后的product_orderinfo a选择器代码如下，其效果如图 2-21所示。

screenshot

.product_orderinfo a{
   color: white;
   display: inline-block;
   padding: 5px 10px;
   text-decoration: none;
   font-weight: bold;
   margin: 3px;
   background: #000099;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   box-shadow: 1px 1px 3px #999999;
   -moz-box-shadow: 1px 1px 3px #999999;
   -webkit-box-shadow: 1px 1px 3px #999999;
}

添加阴影后达到了图2-21的效果，看起来还可以，但是阴影没有融入到背景色中，这将导致沿按钮右边框和底边框产生灰色地带。我们可以利用IE 9中的另一个新功能来避免这种情况，即RGBA颜色值。RGB颜色值是一种用于指定浏览器中颜色的标准方法。RGBA值是相同的，但增加了“alpha”通道，即透明度。

我们可以将灰色值替换为一个RGBA颜色值，该RGBA颜色值可使阴影能够融入背景色中。添加RGBA颜色值后，product_orderinfo a选择器代码如下，其效果如图 2-22所示。

screenshot

.product_orderinfo a{
   color: white;
   display: inline-block;
   padding: 5px 10px;
   text-decoration: none;
   font-weight: bold;
   margin: 3px;
   background: #000099;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   box-shadow: 1px 1px 3px rgba(0,0,0,0,5);
   -moz-box-shadow: 1px 1px 3px rgba(0,0,0,0,5);
   -webkit-box-shadow: 1px 1px 3px rgba(0,0,0,0,5);
}

可以看出，利用了RGBA颜色之后，使按钮的阴影完美地融入了背景色中。

4．添加透明渐变叠加
最后，我们将添加透明渐变叠加，这样能使按钮表面提供一些纹理。对此按钮的整个长度方向重复相同的1px宽的透明垂直渐变可达到此目的，而不会对带宽造成大的影响。

在上述代码的background后面添加一个参数url（string）和repeat-x。string替换为上面的地址。添加后，效果如图 2-23所示。

screenshot

为了确保当光标悬停在此按钮时有相同的效果，我们需要在类选择器中添加和product_ orderinfo a中相同的代码。效果如图 2-24所示。

screenshot

5．作为数据URI添加透明渐变叠加
数据URI首先在IE 9中得到支持，它提供了以内联方式在网页中嵌入数据项的能力。数据URI的一个最常见的用途是将小图像嵌入到网页中。我们可以通过上一步中所述的透明渐变叠加轻易完成此操作。

需要先将PNG图像转换为数据URI。要在按钮上使用该数据URI，只需将background属性中的文件名称替换为该数据的URI。

6．组织到一起
把以上几步的操作放到一起，可以得到我们想要的效果。这里就不再进行截图演示了。

2.3.4 使用CSS3增强网站的样式设计
使用IE 9中新增的对于CSS3字体模块的支持，可以提升你的网站的访问者的排版体验。本小节我们将要介绍如何向网站中引入新的CSS3字体，让你的样式设计在IE 9和其他现代浏览器中得以彰显。

排版是Web设计中一个不可或缺的部分，IE 9在《CSS字体模块级别3工作草案》和《Web开放字体（WOFF）1.0工作草案》中均启用了高级排版功能：使用@font-face规格增强的字体链接；对于Web字体格式（WOFF、原始可安装的TrueType和OpenType）的新增支持；具有新增的font-stretch和更新的font-weight和font-size字体属性的高级排版功能。另外，IE 9利用硬件加速的Microsoft DirectWrite API和子像素Microsoft ClearType字体定位提高字体的呈现速度并使其显示比以前平滑得多。

下面从3方面进行介绍。

1．Web字体
如果要为多个版本的Windows Internet Explorer设计网页，建议学习本部分。

font元素
Web排版这一概念始于现在已经过时的font HTML元素。例如，下面的标记将font元素中的文本更改为以Arial Black字体呈现。

< p>Lorem ipsum < font face="Arial Black">dolor sit< /font> amet.< /p>
尽管这种用法在IE 9中仍然有效，但是font元素和其他格式相关的HTML元素存在的问题是将表现与内容混合在一起。这可能会使得内容很难管理和维护，这就是CSS出现的原因。font是HTML中已弃用的元素，不推荐使用。

CSS字体属性
CSS的出现引入了Web排版的新方法。使用CSS字体属性可以实现网站设计时的许多选项并大大提高灵活性。CSS1首先定义了字体系列和字体样式。表2.3是CSS中的字体基本属性及其说明。

screenshot

字体嵌入
Microsoft Internet Explorer 4.0和CSS2通过使用CSS@font-face规则提供了字体嵌入（font embedding）的概念。字体嵌入是IE 9中字体链接概念的基础，涉及在Web服务器上放置嵌入式OpenType（EOT）字体文件以及网站的其他文件。在你的CSS中，包含一个@font-face规则，该规则显示浏览器要查找参考字体对象的位置并将该字体对象与一个给定的font-family值关联。

在IE 9之前的IE版本中，可以将@font-face规则用于EOT对象。尽管IE 9仍然适用于EOT对象，但EOT被视为旧的类型技术，建议Web设计人员不再使用EOT。

WOFF格式
Internet Explorer 9引入了对WOFF的支持。WOFF是由Mozilla开发并且在2010年由Mozilla、Opera和Microsoft提交给W3C。编写文本时，它还是W3C的工作草案。WOFF基本上是其他字体格式的压缩包装，包括TrueType、OpenType或开放字体格式。这使得它称为Web类型的通用选择，对WOFF的支持在浏览器供应商和造字公司之间发展迅速。

2．使用IE 9升级Web类型：快速入门
当你使用IE 9、CSS3和新的WOFF时很容易实现高级Web字体和超出“web-safe”字体。由于提供Web通用字体的造字公司和类型创建者有很多，因此只需几次单击以及少量的HTML和CSS即可轻松实现印象深刻的Web类型。

下面通过介绍“Web字体服务”和“‘免费’字体”两个主题来说明如何升级Web类型。

Web字体服务
主要造字公司通过Web字体服务使他们的很多字体可用于Web。基本上，当你订阅这些Web字体之一时，你的网页会通过从Web字体服务检索使用在你的CSS中指定的特定字体显示文本。但是大多数服务都需要订阅，某些服务提供免费试用，并且对于基本的使用也没有收费的计划。其他服务对于每种字体只需一次性收费即可下载并获得永久授权。

每个Web字体订阅服务都有不同的实现方法，但以下几步显示了注册服务后开始使用的基本步骤。

（1）为你要使用该服务字体的网站指定网站域名。

（2）选择你要在网站上使用的字体，甚至特定造字公司所拥有的Web服务器也从他们自己之外的多个造字公司获得字体。

（3）输入与要在其上使用所选字体的文本元素相对应的CSS选择器，然后使用网站的UI为每个相应的选择器分配一个字体。通常，你需要手动输入样式表中选择器的名称，它可以是元素、ID或类选择器。

（4）然后，Web服务生成一个script模块。该script模块具有一个对服务的服务器上承载JavaScript文件的引用。将该script块粘帖到HTML的head部分中。

我们在第四步中粘帖到网页中的JavaScript参考使得IE从Web字体服务的服务器中检索相应的字体文件。然后，IE根据你在第三步中输入的选择器采用你所需的字体显示文本。

尽管大多数Web字体服务都是WOFF通用的，但是这些服务还与多个平台兼容并且支持多个浏览器和浏览器版本。这使得这些服务成为实现网站对浏览器的最大兼容性的最佳选择。

“免费”字体
“免费”字体下载的诱惑力非常大，但在下载时，需要考虑以下几点。

（1）最重要的是，查看你要使用的字体的授权并确保你的字体使用符合授权规则。如果并未专门授权用作Web字体，那么请不要使用它。同样，检查授权是否由某个类型的组织限制使用。

（2）确保你考虑的字体采用适当的格式提供。例如，某个字体仅采用WOFF格式提供，那么只有IE 9的用户和其他非常新的浏览器才能够在你使用该字体时体验你网站的字体。如果你为用户提供了基本字体，那么这也是可以接受的，但通常最好能够支持最广泛的浏览器选择和浏览器版本。

（3）确定你要使用的字体是否对你的网站提供适当的语言支持。如果你想使用非拉丁字符，请确保你选择的字体支持这些字符。

（4）“不要偷窃字体！”只是因为你发现Internet或计算机上已安装了一个未保护的字体并不意味着授权你将该字体用作Web字体。此外还要查看你所考虑的字体授权，如果你没有找到该字体的授权，请不要使用该字体。

3．使用IE 9升级Web类型：亲手操作
使用IE 9你可以轻松实现高级Web字体，如果你拥有授权用作Web字体的字体，那么接下来我们向你介绍如何将这些字体链接到你的网站。

这里，我们仍然以咖啡公司的首页为例子，图2-25是其初始的样式。

screenshot

除了文本的两个片断之外，该页面上的所有内容都采用Verdana字体。Verdana是最常见的Web字体之一，因为它是在最流行的操作系统上预安装的字体。在讲解过程中，我们将正文文本保留Verdana字体，更改用于标题的字体。

下面我们通过4步来完成对字体的改变。

（1）启用基本字体链接。

Font linking是样式表用于声明的方法，然后引用你链接到一个或多个字体对象的Web字体系列。字体链接与字体嵌入有所不同，因为字体对象本身并未嵌入到网页上，因此不一定位于与页面相同的服务器上（例如，使用订阅字体服务）。相反，它使用CSS链接到页面。

尽管WOFF大概是Web字体格式的未来，但IE 9还支持旧EOT并且首次支持“原始”安装TrueType和OpenType字体文件。无论它们的格式如何，务必在使用这些字体链接技术之前，确保你获得允许你将字体用作Web字体的授权。

你使用@font-face CSS规则声明字体系列的名称（以及任何变量，如粗细和样式）。最好将所有的@font-face声明都包含在样式表的顶部。例如，以下CSS声明“MyFont”系列的基本格式，并将浏览器指向相应的字体资源。如果你获得了多种格式的授权字体以最大程度提高浏览器和浏览器版本的兼容性，那么在src声明之后，你只需将它们包含在一个逗号分隔的列表中即可。在以下代码中，“MyFont”采用WOFF、TrueType和EOT格式提供：

@font-face{
   font-family:MyFont;
   src:url(‘MyFontFile.woff’),url(‘MyFontFile.ttf’),url(‘MyFontFile.eot’);
}

然后，通过你声明的字体系列引用该字体，在样式表中、在script块中或者在页面上进行内联。例如，下面的元素选择器使得每个元素都使用MyFont系列呈现“mySelector”类。

.mySelector{
   font-family:MyFont, Arial, sans-serif;
   font-size:13pt;
}

在常规的关键字后，插入多个回退字体系列名称，作为font-family属性的值。它是一个字体列表，该列表的顺序为IE 9进行迭代直到找到本地安装字体的优先级。如果用户的连接较慢或者有网络干扰，那么在字体资源完成加载之前IE9将使用堆栈中指定的字体显示你的内容。另外，由于@font-face声明，在此处或你引用MyFont系列的其他位置，你无需处理字体对象名称。

在这里我们使用咖啡公司的首页尝试一下。由于我们的朋友在Ascender，因此我们已经获得对此案例使用他们的字体系列“Ayita Pro”的权限。

在设置字体之前，边栏标题样式的类选择器sidebarheadingr代码如下，其效果如图 2-26所示。

screenshot

.sidebarheading{
   font-size:18px;
}

若要使用Ayita Pro WOFF字体设置这些标题的样式，我们首先在样式表的顶部添加@font-face声明，并在sidebarheading类选择器中添加一个font-family属性声明。

修改后的sidebarheading类选择器代码如下及其效果如图 2-27所示。

screenshot

@font-face{
   font-family:AyitaPro;
   src:url(‘../fonts/AyitaPro.woff’);
}
.sidebarheading{
   font-family:AyitaPro, “Times New Roman”, serif;
   font-size:18px;
}

在@font-face中的font-family属性指示字体的这个实例将称为“AyitaPro”。src属性指示可以在AyitaPro.woff字体对象中找到的字体，该对象位于该网站上的字体文件夹中。

以上介绍的启用基本字体链接是链接字体的最基本的格式，即它具有正常粗细，没有应用任何样式，并且没有压缩，也没有扩展。

我们可以通过使用相应的属性名称来添加这些变量。下面我们开始介绍如何定制字体的粗细、字体样式和字体拉伸。

（2）启用链接字体的变量之字体粗细变量。

这里我们以咖啡公司首页的页面标题为例进行说明。

Ayita Pro字体的粗细为fat，表示该字体可用的最宽粗细。我们可以将示例中咖啡公司的页面标题（使用“title”ID选择器设置样式）更改为使用Ayita Pro Fat，方法是首先声明一个新的字体系列，然后在“title”选择器中引用该字体系列。

在没有设置字体粗细之前的title选择器代码如下，其表现形式如图 2-28所示。
screenshot

#title{
   color:navy;
   font-weight:bold;
   font-size:24px;
   margin:19px 0;
}

若要将页面标题更改为使用Ayita Pro Fat，我们向样式表的顶部添加一个新的@font-face规则，在这里我们为它提供一个新的系列名称“AyitaProFat”，并将它指向相应的字体对象“AyitaPro-Fat.woff”。接着，我们需要更新“title”ID选择器，添加font-family属性。在选择器中我们不需要删除font-weight属性，因为该属性被字体变量@font-face的声明所替代，这样便可确保不支持字体链接或WOFF的浏览器仍然能够看到粗体的标题。

经过以上操作之后title选择器及其表现效果如图2-29所示。

screenshot

@font-face{
   font-family:AyitaPro;
   src:url(‘../fonts/AyitaPro.woff’);
}
#title{
   color:navy;
   font-family:AyitaProFat, “Times New Roman”, serif;
   font-weight:bold;
   font-size:26px;
   margin:19px 0;
}

通过声明另外一个新的@font-face规则，我们可以达到控制字体粗细的目的，除了这个方法外，我们还可以使用另外一个方法。下面对其进行介绍。

如果我们拥有相同字体系列的粗细范围，那么比较简单的做法可能是采用其他方法声明字体变量。我们可以保持系列名称不变，但将“font-weight”属性添加到@font-face规则。

这种方法有点类似于桌面应用程序，若要获得有关某个字体的粗细变量，你只需要单击格式面板上的“Bold”按钮，而无需更改所选字体。将这个方法与前面的方法进行比较，第一个方法中我们声明了一个新的字体系列，而该方法更喜欢将所选字体本身更改为粗体变量。

接下来，我们声明Ayita Pro字体的一个粗体变量并在我们的咖啡公司示例网页中使用该变量。

在没有设置Ayita Pro字体的粗体变量之前其H2选择器代码如下，效果如图 2-30所示。

screenshot

H2{
   clear:left;
   color:maroon;
   margin-left:10px;
   font-size:18px;
   font-weight:bold;
}

首先我们向CSS文件顶部添加以下@font-face声明：

@font-face{
 font-family:AyitaPro;
 font-weight:bold;
 src:url(‘AyitaPro-Bold.woff’);
}

可以看出，我们并没有更改字体系列，但我们增加了粗体的字体粗细并将字体对象的源更改为AyitaPro-Bold.woff。

接着我们将该字体应用于h2元素，我们通过在H2选择器中添加字体系列名称来实现。

更改后的H2选择器代码如下，其表现形式如图2-31所示。

screenshot

H2{
   clear:left;
   color:maroon;
   margin-left:10px;
   font-family:AyitaPro, “Times New Roman”, serif;
   font-size:20px;
   font-weight:bold;
}

相同的字体可以有不同的粗细变量。例如，Ayita Pro 系列具有 thin、light、semibold、black 和 fat 字体，这些字体都可以用在同一个CSS字体系列中。除了关键字normal和bold之外，还可以将 @font-face 声明中的 font-weight 属性设置为100的任意倍数（介于100和900之间），100 是最细的字体，900是最粗的字体。沿着这个光谱，400对应于正常字体，700对应于粗体。这里我们就不对数值类型的font-weight属性值进行演示了，可以自己去尝试。

（3）启用链接字体的变量之字体样式变量。

你可以指定字体的斜体变量。方法与粗细变量相同，但使用font-style属性。就像字体粗细变量，若要声明一个基于样式的字体变量，我们只需保持字体名称不变，但向一个新的@font-face规则中添加font-style属性。

接下来，我们将字体粗细和样式的变量应用于示例咖啡公司网页的部分。我们可以将Ayita Pro的black斜体变量应用于产品标头，该标头也充当指向产品页面的链接。（black 字体粗细通常是在粗体的基础上将厚度提高一两级。例如，Ayita Pro 有 4 种粗细，都比正常厚度厚——semibold、bold、black 和 fat。）

设置产品标头样式的CSS包含在“productlink”类选择器中，其代码如下，表现效果如图 2-32所示。

screenshot

.productlink{
   text-decoration:none;
   color:#004080;
   font-style:italic;
   font-size:14px;
}

若要将Ayita Pro的black italic变量应用于标头，我们必须首先创建一个新的@font-face规则，并向其中添加font-style和font-weight属性：

@font-face{
   font-family:AyitaPro;
   font-style:italic;
   font-weight:800;
   src:url(‘AyitaPro-BlackItalic.woff’);
}

由于已经对选择器应用了italic的字体样式，因此我们只需指定字体粗细为800（从粗体提高一级）和AyitaPro字体系列。

此时，H2选择器代码如下，其表现形式如图 2-33所示。

screenshot

.productlink{
   text-decoration:none;
   color:#004080;
   font-family:AyitaPro, “Times New Roman”, serif;
   font-style:italic;
   font-weight:800;
   font-size:16px;
}

（4）启用链接字体的变量之字体拉伸变量。

对于IE 9，我们可以指定字体拉伸变量，也就是说，我们可以使用font-stretch属性指定是使用某个字体系列的正常字体、压缩字体还是扩展字体。与字体粗细变量一样，有一个压缩和扩展的比例，从ultra-condensed到ultra-expanded。

下面介绍如何使用字体拉伸变量。

首先需要在CSS顶部声明一个@font-face规则：

@font-face{
   font-family:MyFont;
   font-stretch:condensed;
   src:url(‘MyFontCondensed.woff’);
}

其次，像字体粗细和样式变量一样，当引用字体拉伸变量时，使用字体系列名称以及相对应的字体拉伸类型：

.myCondensedSelector{
   font-family:MyFont, Arial, sans-serif;
   font-stretch:condensed;
   font-size:15px;
}

另外，可以将@font-face声明中的font-stretch属性设置为9个绝对关键字之一，范围从最窄到最宽为：ultra-condensed，extra-condensed，condensed，semi-condensed，normal，semi-expanded，expanded，extra-expanded，ultra-expanded。

2.3.5 IE 10概述
Internet Explorer 10 概述让你提前了解下一版本的Windows Internet Explorer中即将推出的开发人员功能，以及可供适用于Windows 8使用JavaScript 的Microsoft Design风格应用的开发人员使用的最新的HTML5、JavaScript和级联样式表级别3（CSS3）功能。通过阅读本小节内容，开发者和设计者就可以做好准备使用这些新功能了。

当IE10正式发布时，它将可用于Windows 7，Windows 8，Windows Server 2008 R2和Windows Server 2012。

我们从10方面来介绍IE10。

1．兼容性
用户代理字符串
用户代理字符串可标识你的浏览器，并向托管你所访问网站的服务器提供有关系统的某些详细信息。

IE10的用户代理字符串为：

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

兼容性模式
文档兼容性模式决定了Windows Internet Explorer呈现网页的方式。

在IE10中，在默认情况下，页面是使用最新的呈现引擎呈现的。但是，如果页面的标记指示浏览器以较旧的文档兼容性模式显示该页面，IE10将以兼容性模式显示该页面。

IE10必须处于“IE10标准模式”才能正确地显示利用本文档中新功能的网页。确保IE10使用最新的呈现引擎呈现网页的最佳方式是在页面的HTML中利用声明“< !DOCTYPE html>”。另外，不要在页面上使用“与X-UA兼容的meta”标记，也不要从Web服务器发送自定义的HTTP标头。

要强制你正在使用IE10查看的网页进入特定的文档兼容模式，可以这样操作：按F12键打开F12工具，单击菜单栏上的“浏览器模式”，选择你要使用的兼容模式，并单击“文档模式”选择使用的标准。

可互操作的Quirks模式
与许多浏览器一样，Internet Explorer 使用网页的文档类型声明来确定如何显示页面。如果网页中包含基于标准的声明（如HTML5文档类型），则页面将以标准模式显示。如果网页不包含文档声明，则页面会以Quirks 模式显示。

由于为了验证网页，HTML5标准需要使用文档类型指令，因此，我们假设现代的网站都包含HTML5文档类型声明。

实际上，现实情况并非如此。许多网站虽然不包含文档类型指令，却期望支持最新的功能，这在某种程度上是因为其他浏览器在Quirks模式中支持那些功能。作为结果，Internet Explorer 10 为网页提供不指定文档类型的可互操作的 Quirks 模式。

由于许多现有的网站都被设计为检测特定版本的Internet Explorer，所以 Internet Explorer 10继续支持较早的文档和浏览器模式。我们建议Web开发人员开发检测功能而不是浏览器的支持标准的网站。

2．CSS
Windows Internet Explorer 10以及Windows 8中的使用JavaScript的Microsoft Design 风格应用，增加了对几种新的级联样式表（CSS）功能的支持，包括新的高级布局、视觉效果以及平移和缩放功能。这一趋势开始于Windows Internet Explorer 8（全面兼容级联样式表级别2修订版1（CSS2.1）标准），并在Windows Internet Explorer 9上得以延续（支持CSS圆角、多种背景图像、新的颜色模式和透明度、级联样式表级别3（CSS3）字体和Web开放字体格式（WOFF）、2-D变换、媒体查询、CSS3命名空间以及其他功能）。Internet Explorer 10通过引入对本小节中所描述的CSS功能的支持，延续此趋势。

高级布局
高级布局的主题及其说明如表2.4所示。

screenshot

视觉效果
IE10和使用JavaScript的Microsoft Design风格应用支持CSS3的最新视觉效果模块。这些模块如表2.5所示。

screenshot

其他新增功能
其他新增功能如表2.6所示。

screenshot

3．DOM
Windows Internet Explorer 10 Release Preview 和适用于 Windows 8 Release Preview 的使用 JavaScript的Microsoft Design 风格应用包含多个新的 DOM 功能（包括高级命中测试 API、媒体查询侦听器、指针事件和手势事件），如表2.7所示。

screenshot

4．JavaScript
借助对于类型化数组和 ECMAScript 5 (ES5) 严格模式的最新支持，Windows Internet Explorer 10 Release Preview 延续了 Windows Internet Explorer 9 的 JavaScript 增强功能，如表2.8所示。

screenshot

5．F12开发者工具
F12 开发者工具是在Windows Internet Explorer 8中引入的，并用Windows Internet Explorer 9 中的新功能进行了更新。Windows Internet Explorer 10Release Preview中的F12开发者工具为多个脚本源添加了Web Worker调试和支持。

关于调试Web Worker，为了帮助改进用户界面的性能，Web Worker使你可以避开主执行线程，而在多个单独线程上运行要占用大量处理器资源的代码。现在，F12开发者工具还可以帮助你调试这些线程，从而查看单独的Worker脚本、设置断点并观察变量。

6．HTML5
对 HTML5 工作草案规范中所定义的多项功能的支持始于 Windows Internet Explorer 8 并延续至 Windows Internet Explorer 9。Windows Internet Explorer 10 Release Preview 和适用于 Windows 8 Release Preview 的使用JavaScript的Microsoft Design风格应用甚至支持更多HTML5。

Internet Explorer 10和使用JavaScript 的 Microsoft Design风格应用支持表2.9所示的功能。

screenshot

7．IndexedDB（索引数据库）
Windows Internet Explorer 10 Release Preview 和使用 JavaScript 的 Microsoft Design 风格应用支持索引数据库 API（即“IndexedDB”）。IndexedDB 支持存储结构化数据。不像 cookies和DOM存储，IndexedDB提供了支持分组、循环访问、搜索和筛选JavaScript对象的功能。

8．SVG（可缩放矢量图形）
在 Windows Internet Explorer 10 Release Preview 和使用 JavaScript 的Microsoft Design风格应用中，添加了对可缩放矢量图形（SVG）的支持，该功能在IE9中已经引入。可缩放矢量图形（SVG）滤镜使你可以直接在浏览器中操作图形，就像使用类似 Adobe Photoshop那样的应用程序一样。

9．性能
Windows Internet Explorer 10和使用JavaScript的Microsoft Design风格应用支持在万维网联合会（W3C）Web性能工作组规范中定义的Web性能。有4种新的Web平台功能可用：导航计时，页面可见性API，requestAnimationFrame方法，setImmediate方法。这4个平台API使开发者能够让浏览器更高效地使用计算机硬件，从而改善网站的性能和电源管理。表2.10是对这4种平台的简单介绍。

screenshot