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 字体可能会导致加载速度变得很慢。