bootstrap之google fonts

bootstrap之google fonts

在学习一个bootstrap时，看到了一行引用代码：@import url(http://fonts.googleapis.com/css?family=Antic+Slab);，于是搜索了一下。

打开相关的网站，显示

/* latin */
@font-face {
  font-family: 'Antic Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Antic Slab'), local('AnticSlab-Regular'), url(http://fonts.gstatic.com/s/anticslab/v4/8c9q46CAcsp9TiRX9KLgZPk_vArhqVIZ0nv9q090hN8.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

下面便是相关的搜索结果：

这个是google的字体，主要应用于进入Google Web Fonts 主页引用相关字体时将字体加入到自己的网站，主要有下面的三种方法：

• 方法一：标准式：在head部分加入一串 link 样式，引入Google字库：；
• 方法二：@import 式：@import url(http://fonts.googleapis.com/css?family=Comfortaa|Rosario);
• 方法三：js引入：

WebFontConfig = {
google: { families: [ 'Comfortaa:latin', 'Rosario:latin' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();

但是在国内访问的时候， google 字体可能会导致加载速度变得很慢。

 

 

链接：https://www.zhihu.com/question/19578734/answer/12322459

http://www.cnblogs.com/fatlyz/p/3999825.html