默認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
|求賢若渴