CSS在线字体库，外部字体的引用方法@fontface对方屌丝正在输入中

首先我们一起来看看@font-face的语法规则：

@font-face{font-family:;src:[][,[]]*;[font-weight:];[font-style:

sometext

标签定义了字体，当浏览器解析

sometext

安全字体这个概念，也许很多人都不是很熟悉，我们先举个例子：

font-family:Arial,Helvetica,sans-serif;这个对字体（font-family）的定义就是一个安全字体。每种操作系统都有自己默认安装的字体，浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同，有的甚至名称都不一样，在这种情况下，我们必须定义安全字体，使字体在所有的浏览器中都能够正常显示。

在上面这个font-family的定义中，我们选择Arial作为首选字体（注：Arial字体是最常用的sansserif字体，也是Windows的默认字体，当字体很小是不容易阅读），但是，苹果系统中没有这个字体，所以我们选择Helvetica（和Arial很相似）作为第二备选字体，最后我们选择sans-serif作为第三备选字体，如果在一个既没有Arial也没有Helvetica的系统里，那么浏览器会使用默认的sans-serif字体来渲染文字。这样，我们很大程度上保证了使用不同操作系统的访问者都能看到相同（至少是类似）的页面文字。

除了Arial，常见的安全字体还有：

在网页开发中，应该尽量使用安全字体，也就是高度通用的字体，这样，访问者才能流畅的阅读网页的所有内容。

但是，网页设计师一定不会满足于使用这些安全字体，如何才能使用漂亮的字体，并能在普通用户的浏览器中被正确的渲染出来？答案是：使用@font-face方案。

@font-face被列为了CSS3的一项新特性，其实它并不是什么新鲜技术，它最早出现在CSS2的规范定义中，但是在CSS2.1中又被删除，现在被正式列入CSS3。目前主流的浏览器（IE4+/Firefox3.5+/Chrome1+/Safari3.1+/Opera10+）都能够支持这个属性，所以不用担心会有浏览器兼容性问题。

@font-face允许您在网页中使用电脑中没有安装的字体，完全摆脱安全字体的限制。只需将字体包安装在服务器上，当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

随着@font-face的不断流行，产生了许多新的字体格式图标集，称为网络字体。GoogleFontsAPI就是基于@font-face的特性开发的一套优秀的网络字体库。

网络字体的优点有很多：

GoogleFonts提供了超过600种的高质量的字体，所有的浏览器都兼容，无需引入JavaScript，简单易用，更重要的是，免费。（虽然，暂时不支持中文字体，因为中文字体库实在是太大了）。

现在来看下，如何在网页中使用GoogleFonts。

在主页中，您可以直接浏览所有的字体，可以按单个词语来查看，或者按句子段落来查看整体效果，还可以调整字体大小。如果您对字体分类比较熟悉，就可以使用左边的搜索条件对字体作筛选。找到您喜欢的字体之后，点击"AddtoCollection"按钮，然后在网页下方的"Collection"中即可找到您添加的所有字体。

如果确认使用该字体，在网页下方的"Collection"中，点击"Use"按钮，在接下来的页面中，您将看到详细的说明，包括字体链接和如何将字体添加到您的网页中。

有三种方式来添加字体链接：

下一步定义在那个标签上使用该字体，例如：在标签上使用，

.myheader{font-family:'Condiment',cursive;}

大功告成，您现在可以打开您的网页欣赏一下了(图3)。

这样，您只会下载h，e，l，o这四个字母的字体，大大缩小了字体包的大小。

您还可以把字体包下载并安装到本地，这样您就可以在本地使用这些字体，比如在Notepad，MicrosoftOffice里。

GoogleFonts还开放了一些接口（称为DeveloperAPI），用于获取字体库的信息数据。

请注意，在URL里面有一个key，这个key是和您的web应用工程相联系的，只有注册过的web应用才能成功调用DeveloperAPI。我们必须要在GoogleCloudConsole注册之后，才能获取这个key。