xylz,imxylz

关注后端架构、中间件、分布式和并发编程

   :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  111 随笔 :: 10 文章 :: 2680 评论 :: 0 Trackbacks
默认Octopress使用Google API的WEB字体渲染CSS。利用Google的CDN,在国外网络访问还是非常快的。

    
<!--Fonts from Google's Web font directory at http://google.com/webfonts -->
    
<link href='http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
    
<link href='http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic' rel='stylesheet' type='text/css'>
但是在天朝,非常非常慢,尤其是使用了HTTPS来访问以后,几乎无法忍受。

于是想将CSS/FONTS下载到本地来渲染,这样加速网络访问。
首先将'http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic'下载到本地来,文件内容为:

    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: normal;
      font-weight
: 400;
      src
: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v5/sDRi4fY9bOiJUbgq53yZCXYhjbSpvc47ee6xR_80Hnw.woff) format('woff');
    
}
    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: normal;
      font-weight
: 700;
      src
: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v5/QABk9IxT-LFTJ_dQzv7xpLrIa-7acMAeDBVuclsi6Gc.woff) format('woff');
    
}
    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: italic;
      font-weight
: 400;
      src
: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v5/03aPdn7fFF3H6ngCgAlQzL3hpw3pgy2gAi-Ip7WPMi0.woff) format('woff');
    
}
    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: italic;
      font-weight
: 700;
      src
: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v5/Foydq9xJp--nfYIx2TBz9XbFhgvWbfSbdVg11QabG8w.woff) format('woff');
    
}
然后将所有字体文件下载到本地,并将css中的链接地址都改为本地地址。

如果更快点,可以将两个css文件合并成一个google-fonts.css。
    ➜ ~/codes/imxylz.com (master) $ cat source/stylesheets/google-fonts.css
    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: normal;
      font-weight
: 400;
      src
: local('PT Serif'), local('PTSerif-Regular'), url(/stylesheets/EgBlzoNBIHxNPCMwXaAhYPesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
    
}
    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: normal;
      font-weight
: 700;
      src
: local('PT Serif Bold'), local('PTSerif-Bold'), url(/stylesheets/QABk9IxT-LFTJ_dQzv7xpJ0EAVxt0G0biEntp43Qt6E.ttf) format('truetype');
    
}
    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: italic;
      font-weight
: 400;
      src
: local('PT Serif Italic'), local('PTSerif-Italic'), url(/stylesheets/03aPdn7fFF3H6ngCgAlQzC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
    
}
    @font-face 
{
      font-family
: 'PT Serif';
      font-style
: italic;
      font-weight
: 700;
      src
: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(/stylesheets/Foydq9xJp--nfYIx2TBz9fEr6Hm6RMS0v1dtXsGir4g.ttf) format('truetype');
    
}
    @font-face 
{
      font-family
: 'PT Sans';
      font-style
: normal;
      font-weight
: 400;
      src
: local('PT Sans'), local('PTSans-Regular'), url(/stylesheets/FUDHvzEKSJww3kCxuiAo2A.ttf) format('truetype');
    
}
    @font-face 
{
      font-family
: 'PT Sans';
      font-style
: normal;
      font-weight
: 700;
      src
: local('PT Sans Bold'), local('PTSans-Bold'), url(/stylesheets/0XxGQsSc1g4rdRdjJKZrNC3USBnSvpkopQaUR-2r7iU.ttf) format('truetype');
    
}
    @font-face 
{
      font-family
: 'PT Sans';
      font-style
: italic;
      font-weight
: 400;
      src
: local('PT Sans Italic'), local('PTSans-Italic'), url(/stylesheets/PIPMHY90P7jtyjpXuZ2cLKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
    
}
    @font-face 
{
      font-family
: 'PT Sans';
      font-style
: italic;
      font-weight
: 700;
      src
: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(/stylesheets/lILlYDvubYemzYzN7GbLkInF5uFdDttMLvmWuJdhhgs.ttf) format('truetype');
    
}
最后修改 /source/_include/custom/head.html 文件:

    
<link href="/stylesheets/google-fonts.css" rel="stylesheet" type="text/css">

全部文件列表为:

    ➜ ~/codes/imxylz.com (master) $ ls -lh source/stylesheets/
    total 1632
    -rw-r--r--  1 adyliu  staff    90K  5  2 02:24 03aPdn7fFF3H6ngCgAlQzC3USBnSvpkopQaUR-2r7iU.ttf
    -rw-r--r--  1 adyliu  staff   115K  5  2 02:24 0XxGQsSc1g4rdRdjJKZrNC3USBnSvpkopQaUR-2r7iU.ttf
    -rw-r--r--  1 adyliu  staff    85K  5  2 02:24 EgBlzoNBIHxNPCMwXaAhYPesZW2xOQ-xsNqO47m55DA.ttf
    -rw-r--r--  1 adyliu  staff   110K  5  2 02:24 FUDHvzEKSJww3kCxuiAo2A.ttf
    -rw-r--r--  1 adyliu  staff    80K  5  2 02:24 Foydq9xJp--nfYIx2TBz9fEr6Hm6RMS0v1dtXsGir4g.ttf
    -rw-r--r--  1 adyliu  staff   109K  5  2 02:24 PIPMHY90P7jtyjpXuZ2cLKCWcynf_cDxXwCLxiixG1c.ttf
    -rw-r--r--  1 adyliu  staff    80K  5  2 02:24 QABk9IxT-LFTJ_dQzv7xpJ0EAVxt0G0biEntp43Qt6E.ttf
    -rw-r--r--  1 adyliu  staff   1.7K  9 22 20:52 google-fonts.css
    -rw-r--r--  1 adyliu  staff    89K  5  2 02:24 lILlYDvubYemzYzN7GbLkInF5uFdDttMLvmWuJdhhgs.ttf
    -rw-r--r--  1 adyliu  staff    39K  9 22 20:54 screen.css
再次访问网站,速度快多了,HTTPS也更快了。当然也失去了Google CDN的加速功能。

[原文地址: http://imxylz.com/blog/2013/09/22/move-google-fonts-to-local-server/]

------

©2009-2014 IMXYLZ |求贤若渴
posted on 2013-09-22 21:42 imxylz 阅读(3215) 评论(0)  编辑  收藏 所属分类: 技术Octopress

只有注册用户登录后才能发表评论。


网站导航:
 

©2009-2014 IMXYLZ