octopress加速google字体渲染 -凯发k8网页登录

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

   :: 凯发k8网页登录首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  111 随笔 :: 10 文章 :: 2680 评论 :: 0 trackbacks
默认octopress使用google api的web字体渲染css。利用google的cdn,在国外网络访问还是非常快的。

    

    
<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'),  format('woff');
    
}
    @font-face 
{
      font-family
: 'pt serif';
      font-style
: normal;
      font-weight
: 700;
      src
: local('pt serif bold'), local('ptserif-bold'),  format('woff');
    
}
    @font-face 
{
      font-family
: 'pt serif';
      font-style
: italic;
      font-weight
: 400;
      src
: local('pt serif italic'), local('ptserif-italic'),  format('woff');
    
}
    @font-face 
{
      font-family
: 'pt serif';
      font-style
: italic;
      font-weight
: 700;
      src
: local('pt serif bold italic'), local('ptserif-bolditalic'),  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(/uploads/image/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(/uploads/image/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(/uploads/image/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(/uploads/image/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(/uploads/image/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(/uploads/image/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(/uploads/image/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(/uploads/image/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的加速功能。

[原文地址: ]

------

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

©2009-2014
网站地图