Aug 3 2014

将 Google Fonts 替换到本地读取

由于 Google Fonts 服务在国内被屏蔽了，所以导致很多引用了谷歌字体的网页在加载时打开十分缓慢。

解决方法也很简单，把网页中需要的字体下载到本地，并从本地加载字体文件即可。

不过有个小前提：需要先翻出去才能下载到所需要的谷歌字体文件哦。

1. 翻出去

2. 在网页的 html 源代码（假设为 index.html ）中，找到引用了谷歌字体的部分，如：

   <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" rel="stylesheet" type="text/css" />

3. 在网页浏览器中访问上面的地址 http://fonts.googleapis.com/css?family=Open+Sans:300,800 ，可以得到一个 css 文件，文件内容为：

   @font-face {
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 300;
     src: local('Open Sans Light'), local('OpenSans-Light'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
   }
   @font-face {
     font-family: 'Open Sans';
     font-style: normal;
     font-weight: 800;
     src: local('Open Sans Extrabold'), local('OpenSans-Extrabold'), url(https://themes.googleusercontent.com/static/fonts/opensans/v8/EInbV5DfGHOiMmvb1Xr-hqRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
   }

把它保存到本地，可命名为 OpenSans.css 。在 index.html 所在的位置新建一个目录，命名为 googlefonts ，将刚才得到的 OpenSans.css 文件放置在这个目录下。

1. 在上面的 OpenSans.css 文件中，可以找到字体文件的地址，即：

   https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff]]]

和

https://themes.googleusercontent.com/static/fonts/opensans/v8/EInbV5DfGHOiMmvb1Xr-hqRDOzjiPcYnFooOUGCOsRk.woff

将这两个文件下载到本地（不需修改文件名。以下的步骤假设保存时未修改文件名，若修改了文件名请自行修改以下步骤中的内容），并放置在 googlefonts 目录下。

1. 修改 OpenSans.css 文件，将字体的地址改为本地地址，即将：

   https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff

修改为：

DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff

对另一个 woff 文件链接同样地做处理，即将：

https://themes.googleusercontent.com/static/fonts/opensans/v8/EInbV5DfGHOiMmvb1Xr-hqRDOzjiPcYnFooOUGCOsRk.woff

修改为：

DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff

1. 修改 index.html ，将 css 的地址改为本地地址，即将：

   <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" rel="stylesheet" type="text/css" />

修改为：

<link href="googlefonts/OpenSans.css" rel="stylesheet" type="text/css" />

font, google