探究
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。那个时候,当我们在网页中指定字体后,浏览器对网页进行解析时,会去系统中去查找我们指定的字体,如果找不到,那就只能使用浏览器默认的字体。
但这样就很麻烦,因为很多时候网页中使用的字体,在用户系统中并没有安装,但网页又必须使用这种字体怎么办呢?那个时候的做法是把要用特定字体显示的文字做成图片,这样就不用担心用户系统中没有安装这种字体了。但这种做成图片的方法也不好,因为毕竟是图片,没有字体那么灵活,比如使用字体,我们可以方便的设置字体的大小、粗细等属性,但使用图片就不行。所以这并不是一种好的解决方案。
那这个问题的终极解决方案是什么呢?就是在 CSS3 中引入的 @font-face 描述符。通过 @font-face 我们可以定义在网页中要使用的任何字体,然后我们要做的就是将字体包放到服务器上。这样当用户加载网页时,字体包会自动下载到用户机器上,保证字体能够正确渲染。
可以说,@font-face 完美解决了在网页中自由使用任何字体的这个问题。 但我们还可以把这个问题解决的更完美,怎么更完美?答案就是 Google Fonts。
Google Fonts 为我们解决了两个问题。第一,从哪里获取需要的字体?答案是 Google Fonts。Google Fonts 目前为我们免费提供了 847 种字体。第二,在使用 Google Fonts 提供的字体时,我们不需要把字体下载下来放到服务器,可以直接使用 Google Fonts 提供的地址,目前,在国内是可以直接使用这些地址的,因为 Google 把相关数据放到国内服务器,访问速度也很快,不用担心被墙。
参考文献
- 使用 Google Fonts 为网页添加美观字体
- CSS3 字体
- Google开源云字体服务器迁移至北京
- Get Started with the Google Fonts API