网页字体使用探究

探究

在 CSS3 之前，web 设计师必须使用已在用户计算机上安装好的字体。那个时候，当我们在网页中指定字体后，浏览器对网页进行解析时，会去系统中去查找我们指定的字体，如果找不到，那就只能使用浏览器默认的字体。

但这样就很麻烦，因为很多时候网页中使用的字体，在用户系统中并没有安装，但网页又必须使用这种字体怎么办呢？那个时候的做法是把要用特定字体显示的文字做成图片，这样就不用担心用户系统中没有安装这种字体了。但这种做成图片的方法也不好，因为毕竟是图片，没有字体那么灵活，比如使用字体，我们可以方便的设置字体的大小、粗细等属性，但使用图片就不行。所以这并不是一种好的解决方案。

那这个问题的终极解决方案是什么呢？就是在 CSS3 中引入的 @font-face 描述符。通过 @font-face 我们可以定义在网页中要使用的任何字体，然后我们要做的就是将字体包放到服务器上。这样当用户加载网页时，字体包会自动下载到用户机器上，保证字体能够正确渲染。

可以说，@font-face 完美解决了在网页中自由使用任何字体的这个问题。 但我们还可以把这个问题解决的更完美，怎么更完美？答案就是 Google Fonts。

Google Fonts 为我们解决了两个问题。第一，从哪里获取需要的字体？答案是 Google Fonts。Google Fonts 目前为我们免费提供了 847 种字体。第二，在使用 Google Fonts 提供的字体时，我们不需要把字体下载下来放到服务器，可以直接使用 Google Fonts 提供的地址，目前，在国内是可以直接使用这些地址的，因为 Google 把相关数据放到国内服务器，访问