默认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
|求贤若渴