免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 PSD 矢量 网页 PPT 动画
美女 唯美 大生活 美图 风景 时尚艺
资讯 综合 专题 热点
您的位置: 起源之家 > 免费资源 > 分享资源 > 文章正文

Typekit在线字库及使用方法

时间:08-15 11:09 来源:citydog.me 整理:广信小编 我要评论(0)
字号:T|T
内容提要:
  字体”对于做前端设计的童鞋来说,是个不大不小的问题,往小了说,顶多选取几个常用的、系统内置的字体,页面不算太难看就完了;往大了说,本来挑了几个美观且能配合页面布

“字体”对于做前端设计的童鞋来说,是个不大不小的问题,往小了说,顶多选取几个常用的、系统内置的字体,页面不算太难看就完了;往大了说,本来挑了几个美观且能配合页面布局的字体,但客户的电脑里没有,打开页面那叫一个难看!

现在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发布,至此就做完了必要的一些设置,剩下的就是在你的页面中调用了。

注:点这里察看typekit字体测试

用我的联通2M带宽进行测试,首页打开测试页面,包括加载字体api、js在内,不超过三秒,速度还算可以。有兴趣的可以来试试。

注:typekit官网

文章来源:http://www.citydog.me/2774.html

    相关阅读:

    顶一下
    (0)
    0%
    踩一下
    (0)
    0%
    免责申明:以上内容仅代表原创者观点,其内容未经本站证实,Typekit在线字库及使用方法对以上内容的真实性、完整性不作任何保证或承诺,转载目的在于传递更多信息,由此产生的后果与Typekit在线字库及使用方法无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

    登录 (请登录发言,并遵守 相关规定)
    如果你对起源之家有任何意见或建议,请到交流平台反馈。到留言板反馈