缓存Google字体副本

那一天,人类终于回想起了曾一度被它们所支配的恐怖和被囚禁于鸟笼中的那份屈辱。仰望高墙,Google远去。在没有Google的结界里,还写个球代码...

这一轮风头似乎还没有任何结束的迹象,虽然我无奈地先移除了google字体并希望不日的将来就可以恢复,但现在看来却是这么的遥遥无期。最后,终于无法忍受系统默认字体的丑陋,在歇斯底里的纠结里翻越高山,存下火种——缓存Google字体到本地实在是无奈的选择。

关于Google字体以及现代网络字体格式WOFF,我在很早以前就写过一篇WOFF和Google Font API,当时,WOFF的浏览器支持环境还不是很好,不过现在的情况以及大为改观。对于像Ghost默认的Casper这样本来就抛弃低版本IE的主题来说,缓存所有字体的版本是毫无意义的,对绝大部分环境来说,缓存WOFF已经足够了。

下面是Casper主题的链接形式,其实一目了然,Casper请求了Noto Serif标准体和粗体,以及标准斜体。外加Open Sans的标体和粗体。

http://fonts.googleapis.com/css?family=Noto+Serif:400,700,400italic|Open+Sans:700,400

根据浏览器的不同,google返回的样式文件不同,但对于现代浏览器来说,返回的是优先使用WOFF格式的样式表。然后将其中的字体文件WOFF全部下载到自己的服务器,并修改CSS的引用并放入站点的样式里:

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  src: local('Noto Serif'), local('NotoSerif'), url(http://swordair.com/assets/fonts/google-cache/NotoSerif.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(http://swordair.com/assets/fonts/google-cache/NotoSerif-Bold.woff) format('woff');
}
@font-face {
  font-family: 'Noto Serif';
  font-style: italic;
  font-weight: 400;
  src: local('Noto Serif Italic'), local('NotoSerif-Italic'), url(http://swordair.com/assets/fonts/google-cache/NotoSerif-Italic.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://swordair.com/assets/fonts/google-cache/OpenSans.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://swordair.com/assets/fonts/google-cache/OpenSans-Bold.woff) format('woff');
}

我想我还不至于闲到写一个脚本去抓取所有的字体格式文件,低版本IE还是早死早超生吧:)

另外,在Ghost后台其实也是有使用Google字体的,这会使得加载后台异常缓慢,别担心服务器忙,其实只是Google傲娇了而已。


评论加载中...

Disqus提供评论支持,如果评论长时间未加载,请飞跃长城。