将 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" />