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 閱讀(3274) 評論(0)  編輯  收藏 所屬分類: 技術 、Octopress

          ©2009-2014 IMXYLZ
          主站蜘蛛池模板: 赣州市| 射阳县| 共和县| 宁化县| 会同县| 余干县| 谢通门县| 北宁市| 和顺县| 余姚市| 从江县| 海晏县| 龙井市| 微山县| 五指山市| 阿合奇县| 阜平县| 平定县| 龙游县| 吉安县| 衡阳县| 天长市| 将乐县| 固阳县| 高安市| 铁力市| 江川县| 云霄县| 景洪市| 休宁县| 尼玛县| 建昌县| 左贡县| 富锦市| 永州市| 鄯善县| 瓦房店市| 海城市| 南乐县| 安陆市| 库车县|