美文网首页
如何为Farbox模板添加TypeKit字体

如何为Farbox模板添加TypeKit字体

作者: LanielStudio | 来源:发表于2015-12-27 20:12 被阅读637次

Farbox是一个相当好用的轻博客平台,其主要开发目的是帮助使用者专注于写作。

但为了使自己的博客更为个性化,每个博主都或多或少会对模板进行一些自定义修改。对类似像我这样不熟悉前端开发与设计的业余爱好者来说,修改网站字体是最容易实现、也最能体现个性化的装饰方式之一。

目前,修改网站字体有多种渠道可以实现,除采用大部分计算机平台自带的字体外,最常用的是使用类似Google Web Font以及TypeKit这样的第三方字体托管服务,以实现在载入网页时自动调用在线字体。此前,还有一项名为FontDeck的同类服务,但该服务已于2015年12月1日永久终止。

TypeKit是Adobe公司提供的字体托管服务,最多支持4200种以上的在线字体,并可将其中1000种以上的字体同步到本地使用。

TypeKit上手也相当简便,只要有Adobe ID就可以免费使用。目前,针对个人用户,TypeKit提供包括「免费」在内的三种服务方案。

与收费用户相比,免费用户的限制主要在可选字体种类、可同步字体数量、支持网站数量、单月网站访问量以及单个「自选字库」(以下简称「Kit」)可选用的在线字体数量。免费用户只能在130个可同步字体和800个在线字体中选择,而收费用户的选择则可分别达到1000及4200个。此外,免费用户在每个Kit中只能选用两种字体,且在线字体仅能用于一个网站。

对一般的博客搭建者而言,在线字体的重要性高于同步功能,因此关于字体同步功能的区别几乎不用在意。从这种意义上讲,免费计划足以覆盖普通用户的日常使用,而对字体种类有较高要求的高阶用户可尝试每年49.99美元的PORTFOLIO计划。该计划与每年99.99美元的PERFORMANCE计划相比,仅在可同步字体数量及每月流量方面有些区别。

使用TypeKit的一些要点

关于TypeKit免费账户的申请及使用方法可参考一篇名为《Typekit在线字库及使用方法》的教程。这里仅分享几个要点:

  • 在登录账号的状态下,进入www.typekit.com首页,可以检视本账户下属的Kit列表及其详细信息;
  • 请时刻牢记自己所创建的Kit ID,该ID在多种场合下具有重要作用,例如在模板中嵌入代码时;
  • 在TypeKit账户信息中可检视字体及相关流量使用情况,还可以打开一些「Early Access」实验性功能;
  • 「Kit编辑器」(Kit editor)中可选择在线字体的字重、风格,具体CSS代码可以通过点按左边栏里的「Using font in CSS」按钮生成。不过需要注意的是,字体的字重及风格种类越多,其发布后的文件尺寸也越大,相应的载入时间就更长。另外,记得每次对Kit做出改动后按下「发布」(Publish),否则所作改动不会生效;
  • 在Kit编辑器的弹出窗口中,按下「嵌入代码」(Embed Code),即可查看使用TypeKit所需的html语法。

如何将TypeKit用于Farbox模板

作为一名用Farbox进行写作的撰写者,你必须要明白如何将上述知识运用在Farbox模板中。我们知道Farbox模板不同于Wordpress的.php构架和普通建站者采用的.html+.css构架。该平台所使用的是.jade+.scss构架。因此在处理一些语法时需要做出响应改动。

幸运的是,.jade文件可以很好地处理html语法。所以在嵌入TypeKit的代码时不要有任何犹豫,尽管把以.jade后缀结尾的模板文件当成普通.html文件处理便是。

具体来说,你只需要在base.jadeheadfooter部分中原封不动地嵌入以下代码即可(#KitID替换成你的具体ID):

<script src="https://use.typekit.net/#KitID.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>                            

在完成上述步骤后,即可在相应模板的.scss文件中调用自定义Kit中的自定义字体,并对字重和风格进行调整。 例如,在最近一个版本的模板中,我将博客的中文字体调成了TypeKit中的「思源黑体」,西文字体则改成了「museo-slab」

这样做的好处是,无论阅读者使用的是什么设备,字库里有没有安装相应字体,都能获得相同的阅读体验。

相关文章

  • 如何为Farbox模板添加TypeKit字体

    Farbox是一个相当好用的轻博客平台,其主要开发目的是帮助使用者专注于写作。 但为了使自己的博客更为个性化,每个...

  • 手帐系列——♥3♥周计划页面设计

    周计划页模仿了老师给的模板,还有字体设计和简笔画待添加。

  • 在线字库无法使用

    折腾了半天,发现中国地区的typekit字库不提供使用,而且typekit字库中汉字字库比较少尴尬

  • herh

    FarBox

  • Farbox

    结果发现 0.5.2.2 的编辑器有问题不能 Ctrl+v 粘贴图片 , 甚至拖拽本地图片添加也不行然后整个输入区...

  • FarBox

    查文档查到 farbox.com,马上就招粉了;这太TM的酷的了。网站博客的性冷淡风格,干净,留白打开速度,嗖嗖的...

  • 微信公众号发送模板消息

    1、添加模板消息插件 2、添加我的模板 点击模板消息之后呢会出现我的模板和模板库,我们点击模板库在模板库中选择自己...

  • UILabel(富文本)

    attrStr添加字体和设置字体的范围 attrStr添加文字颜色 attrStr添加下划线 段落样式 attrS...

  • Mac设置Vim(iTerm)的Fira Code 字体

    首先对Mac添加Fira Code字体:Mac添加Fari Code 字体 打开iTermimage.png 打开...

  • Golang html/template模板渲染解析

    创建模板文件 header.html模板文件中添加 sidebar.html模板文件中添加 footer.html...

网友评论

      本文标题:如何为Farbox模板添加TypeKit字体

      本文链接:https://www.haomeiwen.com/subject/btpbhttx.html