将 Google Fonts 替换到本地读取

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

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

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

  1. 翻出去

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

    1
    <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 文件，文件内容为：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    @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 文件中，可以找到字体文件的地址，即：
    1
    https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff]]]

和

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

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

  1. 修改 OpenSans.css 文件，将字体的地址改为本地地址，即将：
    1
    https://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff

修改为：

1
DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff

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

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

修改为：

1
DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff

  1. 修改 index.html ，将 css 的地址改为本地地址，即将：
    1
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" rel="stylesheet" type="text/css" />

修改为：

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