网页字体使用探究

探究

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

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

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

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

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

参考文献

1. 使用 Google Fonts 为网页添加美观字体
2. CSS3 字体
3. Google开源云字体服务器迁移至北京
4. Get Started with the Google Fonts API