Typekit在线字库介绍
“字体”对于做前端设计的童鞋来说，是个不大不小的问题，往小了说，顶多选取几个常用的、系统内置的字体，页面不算太难看就完了；往大了说，本来挑了几个美观且能配合页面布局的字体，但客户的电脑里没有，打开页面那叫一个难看！
现在Google提供了一个web fonts在线字库，提供上百个可选字体，而且很多程序的主题作者，都开始使用这一服务（我使用的这款主题的作者，内置使用了Google在线字体）。但很不幸，依照Google在大陆地区杯具的角色，这一字体服务也不例外，加载慢不说，有时甚至直接屏蔽，让人既窝火，又无奈。
这里把Google web fonts的合作者：Typekit，介绍给童鞋们，在无法改变国内网络现状的情况下，可以用typekit来替代Google的在线字体服务，虽然与Google比，有种种限制，但唯一的好处是：Typekit使用了EdgeCast的CDN，国内访问的话，电信、联通走的均是香港的节点，速度有保障，最关键的是尚未被墙（去年我试过typekit，是被墙的状态）！
下面介绍下typekit的用法：
1、注册用户。typekit是商业服务，但提供一个免费套餐，可以为一个站点提供任意两款免费字体。由于typekit属于adobe旗下服务，所以其需要使用adobe的ID，有的可以在套餐选择页面直接选择Trial方案，登录即可；没有的，请在此点击“Creat an Adobe ID”，进行注册。
2、注册完成后，系统会将你带到一个“服务简介”页面，点右下角的“Get Started”进入下一步。
3、创建字体套件（Kit）。这是一个字体容器，每个容器对应一个站点，同时在这个容器中可以放入N个字体供用户使用。免费用户只能创建一个kit容器，该kit中最多可放两个字体，也就是说每个免费账号可以针对一个站点使用两种字体。如下图，Name即为这个kit的名称，随便起名；Domains是这个kit对应的站点域名，如例，可以填单域名、泛域名、IP地址，甚至是用于本地调试的localhost。
4、完成上一步后，系统会给出对应此kit的一段js代码，将其嵌入到页面之间即可。也就是说，页面引用了此kit的代码后，你就可以在页面当中任意调用此kit中的字体了。比如我的kit中有名为font1、font2两个字体，将这段代码嵌入到页面后，我直接在页面以font-family:font1;调用即可。
5、完成上述设置后，进入下一步的页面后，点击页面上部的“Browse Fonts”即可进入字体浏览页面。
将鼠标移动到你满意的字体上去，选择随后浮现的“+ Add to Kit”，进入下一步：添加字体到kit容器的操作。
如上图，绿色块处，即为你刚刚选择要放入kit的字体。点击左侧上部的Using fonts in CSS，会弹出一个包含在css中规范写法的提示框，按照提示框的内容，在你的css中加入调用即可；Weights & Styles，即此字体要包含的各种样式；CSS Stack是为该字体重新命名一个你自己人为好记的名字，以后调用，填写你重命名的名字的即可。设置好这几项，然后点击右下角的“Publish”按钮，将此kit发布，至此就做完了必要的一些设置，剩下的就是在你的页面中调用了。
用我的联通2M带宽进行测试，首页打开测试页面，包括加载字体api、js在内，不超过三秒，速度还算可以。有兴趣的可以来试试。
微信扫一扫
