苏州柯瑞德信息系统有限公司云计算|IT外包|弱电工程|智能仓储|系统集成|智能家居

Skip to content

当前位置：首页

博文天下

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

分类：博文-IT资讯

发布于 2017年2月07日星期二 16:26

作者：Super User

点击数：20730

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

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

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

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

@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。

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

@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');
}