2013-12-24 藍(lán)藍(lán)設(shè)計(jì)的小編
轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)( paul-jarrel.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供有效的 BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
來源：http://www.uisdc.com/100-things-you-should-know-about-design
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請點(diǎn)這里
雖然Web字體版式技術(shù)在各種定制化字體解決方案(比如@font-face, Google Fonts)的支持下一路蓬勃發(fā)展，但是在我們在設(shè)計(jì)和桌面app開發(fā)中仍然對其缺少精準(zhǔn)的控制和把握。還好有一系列的強(qiáng)大功能jquery插件幫助我們解決這個(gè)問題。這篇文章詳細(xì)介紹了近10個(gè)最流行的Web字體版式插件，它們允許我們潤色字體版式并創(chuàng)造出更多超級酷的效果。
不得不說，網(wǎng)站本身也創(chuàng)意十足，個(gè)性滿滿喲：）
Lettering.js 是最簡單最流行的網(wǎng)絡(luò)版式插件之一。通過分拆每個(gè)文本，并將每個(gè)字母放在定制好的<span>中，該插件能夠讓你精準(zhǔn)的操控標(biāo)題版式。使用它小心的調(diào)整你的字距或者添加各式各樣的CSS，從而讓每個(gè)單詞都有超級贊的效果。
FitText.js
交互式網(wǎng)站設(shè)計(jì)很好用，它允許內(nèi)容根據(jù)用戶的查看終端的大小自動(dòng)調(diào)整。自然地你的web文本隨著查看它的瀏覽器或者終端大小變窄而自動(dòng)收縮，但是某些情況下會(huì)使題目和標(biāo)題變得有點(diǎn)難看，尤其是由于文本自動(dòng)縮進(jìn)或者多出新的一行等情況。這就是FitText.js插件的功能，它能夠使你的標(biāo)題像一張回應(yīng)式圖片一樣調(diào)整大小，單詞不會(huì)出現(xiàn)跑到新的一行的情況。
很酷的名字吧，親！Bacon插件能夠讓你的文本像貝塞爾曲線一樣排列。在InDesign中圍繞圖片處理文本固然簡單。但是在HTML/CSS中文本都是按照方塊區(qū)域排列的。所以說雖然能夠強(qiáng)行用HTML能夠達(dá)到相似的效果，但是用Bacon能夠讓你輕松簡潔的利用坐標(biāo)參數(shù)達(dá)到這些效果！
有很多的Jquery插件能夠幫助你調(diào)整字距，但是大多數(shù)要求一些直接的輸入分別控制每一個(gè)字母。如果希望找一些快速簡單的方案不如來看看TypeButter。只需將它賦予你的版式類型，它將自動(dòng)用一些愉悅的合理好看的間距來覆蓋瀏覽器的默認(rèn)值。該插件默認(rèn)支持Arial，Georgia，Helvetica，Times和Verdana。你也可以通過修改一些地方來支持其他的字體。
Kerning.js
盡管這個(gè)插件的名稱是Kerning，但是這個(gè)插件能做不僅僅是控制字距。它也能夠以字母為單位調(diào)其體大小，顏色，變形來創(chuàng)造各式各樣的絢麗效果。而且它只是控制CSS而不需要添加其他額外的span等其他tag。不錯(cuò)吧！
在web設(shè)計(jì)中控制縱向間距很簡單吧，只需要我們設(shè)置line-height屬性。不幸的是一旦有圖片插入就沒那么容易了，這個(gè)時(shí)候就需要Baseline.js了。只需要一行javascript代碼Baseline.js就能夠調(diào)整你的圖片區(qū)域到你想要的位置。換句話說它能讓你的內(nèi)容時(shí)刻都與你的基線網(wǎng)格對齊。
給字體設(shè)置弧度并不是每天都會(huì)遇到的情況。但是在一些情況下，比如設(shè)計(jì)一個(gè)吸引人的標(biāo)題、重設(shè)計(jì)一個(gè)復(fù)古商標(biāo)，Arctext.js這個(gè)插件真的很給力！插件如其名，它能夠根據(jù)你的需要設(shè)置指定半徑長度來做出不同的圓弧。
我們看到很多畫報(bào)的每一行都設(shè)計(jì)為一個(gè)寬度?，F(xiàn)在我們能通過Hatchshow插件輕松達(dá)到這個(gè)效果。它自動(dòng)給每一行文本添加一個(gè)<span>并調(diào)整字體大小，所以每一行都會(huì)是一樣的寬度。它在經(jīng)典和復(fù)古設(shè)計(jì)中會(huì)有很大的幫助。
剛開始小編以為slabText.js僅僅是另一個(gè)標(biāo)題縮放插件，但實(shí)際上它的功能強(qiáng)大的多。slabText結(jié)合了FitText和Hatchshow兩個(gè)插件的優(yōu)點(diǎn)將他們?nèi)跒橐惑w。這意味著你有一個(gè)交互式標(biāo)題。它能夠智能拆分行并根據(jù)字體大小進(jìn)行縮放。所以一旦查看終端達(dá)到了一定的尺寸，你的標(biāo)題將自動(dòng)重新組織來保持可讀性，而不是縮放到不可讀的尺寸。
JqlsoText是一個(gè)制作偽等距文字效果的插件，但是到底這個(gè)插件是做什么的？總的來說這個(gè)插件就是給你的文本從一個(gè)值到另一個(gè)值放大到不同的尺寸。這個(gè)插件同樣很適合創(chuàng)建不同的標(biāo)題或者模仿復(fù)古式文字排版設(shè)計(jì)。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://paul-jarrel.com