这一章，是一个激动人心的部分，有关前面提到的web字体。使用的方式都很固定，所以这次的内容，无论是从理解还是应用上，都比较简单。
过去，我们通常只能在非常有限的字体集中进行选择，最好使用那些用户很可能在自己电脑上安装了的字体，这也是为什么很多网站将body元素里的字体设为Arial、Georgia或者Verdana。但是现在我们有了Web字体，这样我们在开发Web项目时就有了大量字体可供选择，而且，最激动人心的是，这一切，完全可以是免费的！这里我们介绍两种Web字体使用方式，一种是自托管的Web字体，另一种是使用Google Font提供的服务（Google是一家伟大的公司！）。
一 、什么是Web字体
CSS规则@font-face为Web字体创造了可能，该样式允许CSS链接到服务器上的一种字体供网页使用。
我们目前经常用的字体格式有这么几种：
1 、内嵌OpenType（.eot），是微软的一项专有格式，使用数字版权管理技术防止在未经许可的情况下使用。
2 、TrueType(.ttf)和OpenType(.otf)，台式机使用的标准字体文件类型，被浏览器广泛支持。
3 、Web开发字体格式（.woff），专为Web字体设计，是压缩的TrueType(.ttf)和OpenType(.otf)，可以添加额外的数据，并不影响表现，也被浏览器广泛支持。
4 、可缩放矢量图形（.svg），早期Web字体多使用到，现在应避免使用！
值得注意的是：
1 、字体也是有版权的，不能随意用在网页上，你在选择之初就要注意到，当然你可以购买，这个另当别论。但是伴随着Web字体服务的大量涌向，我们可以轻易地获得更多字体的免费使用权利。
2 、当你使用Web字体时，一个潜在的风险就是他们可能会增加页面的"重量"，这样无疑会减慢网页加载的速度，所以一定要审慎的加以选择，不能盲目地使用。
二 、在哪里能找到Web字体
在网站上使用Web字体有两种方式：自托管和Web字体服务。这两种方式都是完全有效的，但二者差异很大，各有利弊，所以需要你好好权衡。
1 、自托管
这种方式是将字体文件放在你的服务器上，正如CSS文件和图片一样。这就需要你从相关网站上事先下载合适的字体文件，接下来我们用到的是Font Squirrel网站。
2 、Web字体服务
这种方式提供给你一段代码，也许是CSS文件，也许是JavaScript文件，嵌入到网页中，浏览器在读到这些内容的时候会自动的从远程服务器上下载相关的字体，这种方式看起来更为便捷，也方便修改，但有时JavaScript会影响网站的性能，这点也应该考虑到。
三 、下载第一个Web字体
在页面中使用自托管Web字体为元素添加样式时，需要先将Web字体下载下来，下载免费的Web字体也很方便，我们这里使用Font Squirrel。
1 、打开Font Squirrel首页
2 、选择你喜欢的字体，点击即可进入相应页面
3 、点击Webfont Kit
字体格式一般是TTF和WOFF，字体的子集按照需求，一般默认即可。
4 、 点击DOWNLOAD @FONT_FACE KIT
即可完成下载
5 、将文件解压缩，就能查看文件内容
文件有很多个，按照英文名都能看明白，其实我们真正需要的，并没有这么多。
打开一个文件，会看到：
html文件中可以查看字体的相应表现。
CSS文件包含了该字体对应的规则！考虑的相当周全！
接下来，我们就可以应用字体到我们的网站中了。
注意：通常一个页面中不应该使用两个（最多三个）以上的Web字体，因为引用的文件越多，浏览器加载的就越慢，对于智能设备而言也许更糟糕。这里说的 两个或者三个不是指两三种字体，而是字体的样式，如常规、加粗和斜体就算三种。
四 、理解@font-face规则
这时候我们来看看Web字体的工作原理。
打开style.css文件，是这个样子：
看起来相当复杂，不像是CSS的格式，@font-face并不是选择器，因此这段样式不会影响任何元素，它存在的意义就是让样式表知道有个Web字体存在。而里面的内容，第一个Font-family后面跟的是字体的名称，这个名字不是固定的，可以自定义再往后是字体文件的引用路径，告诉浏览器字体文件的位置。这些是最简单的内容，了解这些即可开始工作，想深入了解的话可以网上查资料。
五 、使用Web字体设置文本样式
1 、打开ptsans_regular_macroman文件夹里的stylesheet.css。
2 、将@font-face规则复制到你的样式表中
3 、将字体文件复制到你的CSS文件夹里
4 、对font-family重命名。
5 、至此就可以像使用其他字体一样使用该Web字体了。
效果如下：
这样看并不困难！
六 、为Web字体应用粗体和斜体
要知道，对于Web字体而言，每一种字体都只有一种粗细和风格。上一个的@font-face规则仅限于常规样式，如果你想这个时候应用粗体和斜体，浏览器呈现出来的将是伪粗体和伪斜体。如果要应用字体本身的粗体和斜体，就要相应的修改样式表里的规则。
1 、为Web字体应用粗体
打开字体文件夹里的ptsans_bold_macroman，打开里面的stylesheet.css。
将@font-face规则复制到你的样式表中，并把字体文件放到CSS文件夹下。
对font-family重命名，与常规的保持一致！
最关键的是这一步：将@font-face规则里的font-weight改为bold，记得保存文件！
这个时候，只要你的规则里有font-weight:bold，就会自动的显示粗体版本的字体。
2 、为Web字体应用斜体
与应用粗体几乎一样！
还有一种粗斜体，如果你喜欢，也可以试着添加进去。
注意：
1 、无论添加多少规则，字体的名称一定要保持一致
2 、字体多的时候，可以在CSS文件夹里新建一个font文件夹，这样@font-face里的url路径就要相应的修改
3 、如果没有某种字体样式的规则，浏览器就会试着呈现它，伪粗体或者伪斜体的体验并不好
4 、最为重要的是，引入的字体文件不宜过多，因为它会降低浏览器的性能，要找到一个平衡点，切记滥用！
七 、 使用Google Fonts的Web字体
相比自托管的字体而言，Google Font也许更为简单，它在云端将字体文件保存，@font-face规则为你写好，你所需要的，只是将一段代码插入你的HTML文件。
1 、打开Google Fonts网站
2 、挑选你所喜欢的字体，点击右上方的加号，可以选择多个字体
3 、查看所选的字体
4 、可以自定义你所需要的样式，load time为加载的时间。样式过多会影响加载的速度。
5 、按照给出的指示，往HTML文件中加入一些代码，在CSS中就可正常使用给出的字体名称。
相当的便捷！
总结：使用Web字体，并不困难，但是你在使用的时候，一定要考虑到这是否是必要的，因为加载额外的字体难免会降低浏览器的性能，所以一定要权衡好。在《JavaScript DOM 编程艺术》这本书里讲到，"没有不好的技术，只有不会用的技术"，我们现在面临的，是五花八门的技术，这个时候需要的，不是大而全，而是懂得适时的舍弃。
很遗憾的是，中文这样的Web字体服务，很少见！