10个增强Web字体排版的jquery插件 - 优设网 - UISDC

10个增强Web字体排版的jquery插件

2013/03/18 11733评论区

虽然Web字体版式技术在各种定制化字体解决方案(比如@font-face, Google Fonts)的支持下一路蓬勃发展,但是在我们在设计和桌面app开发中仍然对其缺少精准的控制和把握。还好有一系列的强大功能jquery插件帮助我们解决这个问题。这篇文章详细介绍了近10个最流行的Web字体版式插件,它们允许我们润色字体版式并创造出更多超级酷的效果。
不得不说,网站本身也创意十足,个性满满哟:)

Lettering.js

Lettering.js example

Lettering.js 是最简单最流行的网络版式插件之一。通过分拆每个文本,并将每个字母放在定制好的<span>中,该插件能够让你精准的操控标题版式。使用它小心的调整你的字距或者添加各式各样的CSS,从而让每个单词都有超级赞的效果。

 FitText.js

FitText.js example

交互式网站设计很好用,它允许内容根据用户的查看终端的大小自动调整。自然地你的web文本随着查看它的浏览器或者终端大小变窄而自动收缩,但是某些情况下会使题目和标题变得有点难看,尤其是由于文本自动缩进或者多出新的一行等情况。这就是FitText.js插件的功能,它能够使你的标题像一张回应式图片一样调整大小,单词不会出现跑到新的一行的情况。

Bacon!

Bacon.js example

很酷的名字吧,亲!Bacon插件能够让你的文本像贝塞尔曲线一样排列。在InDesign中围绕图片处理文本固然简单。但是在HTML/CSS中文本都是按照方块区域排列的。所以说虽然能够强行用HTML能够达到相似的效果,但是用Bacon能够让你轻松简洁的利用坐标参数达到这些效果!

TypeButter

TypeButter example

有很多的Jquery插件能够帮助你调整字距,但是大多数要求一些直接的输入分别控制每一个字母。如果希望找一些快速简单的方案不如来看看TypeButter。只需将它赋予你的版式类型,它将自动用一些愉悦的合理好看的间距来覆盖浏览器的默认值。该插件默认支持Arial,Georgia,Helvetica,Times和Verdana。你也可以通过修改一些地方来支持其他的字体。

Kerning.js

Kerning.js example

尽管这个插件的名称是Kerning,但是这个插件能做不仅仅是控制字距。它也能够以字母为单位调其体大小,颜色,变形来创造各式各样的绚丽效果。而且它只是控制CSS而不需要添加其他额外的span等其他tag。不错吧!

Baseline.js

Baseline.js example

在web设计中控制纵向间距很简单吧,只需要我们设置line-height属性。不幸的是一旦有图片插入就没那么容易了,这个时候就需要Baseline.js了。只需要一行javascript代码Baseline.js就能够调整你的图片区域到你想要的位置。换句话说它能让你的内容时刻都与你的基线网格对齐。

 Arctext.js

ArcText.js example

给字体设置弧度并不是每天都会遇到的情况。但是在一些情况下,比如设计一个吸引人的标题、重设计一个复古商标,Arctext.js这个插件真的很给力!插件如其名,它能够根据你的需要设置指定半径长度来做出不同的圆弧。

Hatchshow

Hatchshow.js example

我们看到很多画报的每一行都设计为一个宽度。现在我们能通过Hatchshow插件轻松达到这个效果。它自动给每一行文本添加一个<span>并调整字体大小,所以每一行都会是一样的宽度。它在经典和复古设计中会有很大的帮助。

slabText.js

slabText.js example

刚开始小编以为slabText.js仅仅是另一个标题缩放插件,但实际上它的功能强大的多。slabText结合了FitText和Hatchshow两个插件的优点将他们融为一体。这意味着你有一个交互式标题。它能够智能拆分行并根据字体大小进行缩放。所以一旦查看终端达到了一定的尺寸,你的标题将自动重新组织来保持可读性,而不是缩放到不可读的尺寸。

jqlsoText

jqIsoText.js example

JqlsoText是一个制作伪等距文字效果的插件,但是到底这个插件是做什么的?总的来说这个插件就是给你的文本从一个值到另一个值放大到不同的尺寸。这个插件同样很适合创建不同的标题或者模仿复古式文字排版设计。

翻译:SDC翻茄匠  ID:光(QQ 644509407 欢迎交流设计翻译心得)
原文地址:line25.com

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/10-jquery-plugins-to-enhance-your-web-typography

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 界面设计 版式设计 排版布局 职场 优设专访 设计师干货 优设大课堂 设计达人 配色 web前端开发 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 设计规范 海报设计 设计趋势 用户体验设计 动效设计 平面设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里