软件 聊天 安全 视频 浏览器 下载 系统 办公 教学 输入法
免费 域名 空间 相册 邮箱 资源 网赚 试用 优惠 工具
教程 设计 三维 学院 办公 网页
素材 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在线字库及使用方法无关;如以上转载内容不慎侵犯了您的权益,请联系我们将会及时处理。
    [责任编辑:广信小编]

    精彩图文

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