Google Fonts并不是简单的字体下载站
上回小觉在《由浅入深，@font-face与它的小伙伴们的故事》中有谈到Google
Fonts这个网站作为英文字体下载的网站来推荐，但是对一名前端来说其更大的作用并不在此。现在让我们对其进行更详细的了解：
关于谷歌字体（即Google fonts，以下文字经过官方介绍进行翻译而来）
使用在线字体的页面将更加漂亮，更具可读性、可访问性与开放性。
谷歌字体让所有人，包括专业的设计师与开发者可以快速、简便的使用在线字体，我们相信每个人都可以在他们的网页与应用中使用高质量的字体。
我们的目标是创建一个可以为世界各地的人所使用的在线字体目录。通过我们的 API
服务可以在几秒内为您的网站添加谷歌字体，该服务不仅快速、可靠，而且还是免费的。
开源字体
谷歌字体都是开源的，这意味着你可以自由地与你的朋友与同事分享，甚至可以基于它们定制自己的字体，或者与原来的设计师共同改善他们；你还可以以任何一种方式使用它们，私人或商业，包括印刷，在电脑上使用，或者网站使用。
我们正在与世界各地的设计师协商发布高质量的在线字体，如果你是一名字体设计师并且希望参与其中，请联系我们。
许多谷歌的页面已经在使用谷歌字体，例如谷歌的关于页与谷歌世界遗产项目，它们都使用了 Open Sans 这款字体。
通过它你能够得到什么？
首先，将网页上的字体设置成你喜欢的或者更漂亮的字体总是能让页面更加美观的，当然这个前提基于你的美感。
其次，在访问者的电脑上不存在前端人员在页面上所设置的字体的前提下，能够自动加载该字体在Google
Fonts上的文件，以达到让该访问者的电脑上更好展示该页面。
最后，使用的字体文件来自Google Fonts，并且都已经加了CDN，在保证了速度稳定的同时也减轻了服务器的压力。
不过这儿有一点需要解释的是，由于英文字体文件大多都比较小，单位大多也是以k为标准，不似中文字体般有着强壮的身体，单位几乎都以M为标准，在当前国内网络带宽的环境下使用中文网络字体真心不现实，同时中文字体版权问题及其商业模式陈旧等也是个问题，所以Google
Fonts上的字体大多适用于英文页面或者需要对英文作少许特效的站点。
怎么将其上的字体作用在自己的页面上？
（由于官方提供的step-by-step已经很详细了，这儿小觉就不详细说明了。）
1、进入其站点：http://www.google.com/fonts/
2、找到自己喜欢的字体，然后通过“Qucik-use”按钮快速跳转至该字体的使用页面
3、在跳转后的页面上选择好该字体中你所想要的样式，其中样式数量根据每种字体其样式数量也有所不同
4、选择好该字体文件的字符设置，一般默认拉丁即可
5、选择你想在你自己的页面上添加该字体的方式，其中有3个选择：
1）通过link标签的方式放入页面中的<head>标签中
2）通过@import的方式放在css样式文件顶部（一般是放置在顶部的）导入
3）通过JavaScript代码的方式放入页面文件中，一般放置在</body>标签前
6、在成功导入字体文件到页面后还需指定字体到你想要作用的代码块中
Google Fonts API的实现原理
首先其API的实现基于浏览器可加载服务器端字体文件的功能，接着通过样式中定义的@font-face属性来执行。
其中API所加载的正式Google开放字体目录中的文件，但是就小觉发现其大部分字体@font-face属性配置中都是先基于本地搜索是否有该字体，如果有该字体则不加载服务器上的字体，直接调用本地字体，否则就下载服务器端的地址，接着其服务器端上的文件同样也发现几乎都是.woff字体，兼容.woff字体的浏览器有IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+，也就是说IE8及以下版本无法使用Google
Fonts API，如果注重的站点客户群使用的浏览器低于IE9请小心使用。
参考页面：
http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html
http://www.cnblogs.com/lloydsheng/archive/2010/05/26/1744127.html
原文链接：http://www.zhugexiaojue.com/note/googlefonts-775.html
Fonts这个网站作为英文字体下载的网站来推荐，但是对一名前端来说其更大的作用并不在此。现在让我们对其进行更详细的了解：
关于谷歌字体（即Google fonts，以下文字经过官方介绍进行翻译而来）
使用在线字体的页面将更加漂亮，更具可读性、可访问性与开放性。
谷歌字体让所有人，包括专业的设计师与开发者可以快速、简便的使用在线字体，我们相信每个人都可以在他们的网页与应用中使用高质量的字体。
我们的目标是创建一个可以为世界各地的人所使用的在线字体目录。通过我们的 API
服务可以在几秒内为您的网站添加谷歌字体，该服务不仅快速、可靠，而且还是免费的。
开源字体
谷歌字体都是开源的，这意味着你可以自由地与你的朋友与同事分享，甚至可以基于它们定制自己的字体，或者与原来的设计师共同改善他们；你还可以以任何一种方式使用它们，私人或商业，包括印刷，在电脑上使用，或者网站使用。
我们正在与世界各地的设计师协商发布高质量的在线字体，如果你是一名字体设计师并且希望参与其中，请联系我们。
许多谷歌的页面已经在使用谷歌字体，例如谷歌的关于页与谷歌世界遗产项目，它们都使用了 Open Sans 这款字体。
通过它你能够得到什么？
首先，将网页上的字体设置成你喜欢的或者更漂亮的字体总是能让页面更加美观的，当然这个前提基于你的美感。
其次，在访问者的电脑上不存在前端人员在页面上所设置的字体的前提下，能够自动加载该字体在Google
Fonts上的文件，以达到让该访问者的电脑上更好展示该页面。
最后，使用的字体文件来自Google Fonts，并且都已经加了CDN，在保证了速度稳定的同时也减轻了服务器的压力。
不过这儿有一点需要解释的是，由于英文字体文件大多都比较小，单位大多也是以k为标准，不似中文字体般有着强壮的身体，单位几乎都以M为标准，在当前国内网络带宽的环境下使用中文网络字体真心不现实，同时中文字体版权问题及其商业模式陈旧等也是个问题，所以Google
Fonts上的字体大多适用于英文页面或者需要对英文作少许特效的站点。
怎么将其上的字体作用在自己的页面上？
（由于官方提供的step-by-step已经很详细了，这儿小觉就不详细说明了。）
1、进入其站点：http://www.google.com/fonts/
2、找到自己喜欢的字体，然后通过“Qucik-use”按钮快速跳转至该字体的使用页面
3、在跳转后的页面上选择好该字体中你所想要的样式，其中样式数量根据每种字体其样式数量也有所不同
4、选择好该字体文件的字符设置，一般默认拉丁即可
5、选择你想在你自己的页面上添加该字体的方式，其中有3个选择：
1）通过link标签的方式放入页面中的<head>标签中
2）通过@import的方式放在css样式文件顶部（一般是放置在顶部的）导入
3）通过JavaScript代码的方式放入页面文件中，一般放置在</body>标签前
6、在成功导入字体文件到页面后还需指定字体到你想要作用的代码块中
Google Fonts API的实现原理
首先其API的实现基于浏览器可加载服务器端字体文件的功能，接着通过样式中定义的@font-face属性来执行。
其中API所加载的正式Google开放字体目录中的文件，但是就小觉发现其大部分字体@font-face属性配置中都是先基于本地搜索是否有该字体，如果有该字体则不加载服务器上的字体，直接调用本地字体，否则就下载服务器端的地址，接着其服务器端上的文件同样也发现几乎都是.woff字体，兼容.woff字体的浏览器有IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+，也就是说IE8及以下版本无法使用Google
Fonts API，如果注重的站点客户群使用的浏览器低于IE9请小心使用。
参考页面：
http://www.cnblogs.com/milly/archive/2013/05/10/google-fonts.html
http://www.cnblogs.com/lloydsheng/archive/2010/05/26/1744127.html
原文链接：http://www.zhugexiaojue.com/note/googlefonts-775.html
-
Carooooooline 赞了这篇日记 2017-01-11 11:21:45
