从自己服务器加载谷歌字体，解决googleapis加载慢的问题

分类：博文-IT资讯
发布于 2017年2月07日 星期二 16:26
作者：Super User
点击数：21153

假设要使用open sans400和700的字体，将IE浏览器调到IE8模式，打开这俩地址，友情提示不翻墙可能打不开。

 

http://fonts.googleapis.com/css?family=Open+Sans:400

http://fonts.googleapis.com/css?family=Open+Sans:700

会得到这么一段样式（400的）

1
2
3
4
5
6
7
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot);
  src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3fY6323mHUZFJMgTvxaG2iE.eot) format('embedded-opentype'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

里面有俩链接，一个是eot字体，一个是woff字体，在浏览器里分别下载这俩字体，在主题里新建个fonts目录，放进去，名字改的好认点，比如opensans.eot，opensans.woff。

然后上面那个样式改成下面这样，直接扔进主题样式表里。

1
2
3
4
5
6
7
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/opensans.eot);
  src: local('Open Sans'), local('OpenSans'), url(fonts/opensans.eot) format('embedded-opentype'), url(fonts/opensans.woff) format('woff');
}

这样字体文件就是从自己服务器加载了，当然是用其它CDN服务也可以。