雖然Web字體版式技術(shù)在各種定制化字體解決方案(比如@font-face, Google Fonts)的支持下一路蓬勃發(fā)展，但是在我們在設(shè)計和桌面app開發(fā)中仍然對其缺少精準(zhǔn)的控制和把握。還好有一系列的強(qiáng)大功能jquery插件幫助我們解決這個問題。這篇文章詳細(xì)介紹了近10個最流行的Web字體版式插件，它們允許我們潤色字體版式并創(chuàng)造出更多超級酷的效果。
不得不說，網(wǎng)站本身也創(chuàng)意十足，個性滿滿喲：）

Lettering.js

Lettering.js 是最簡單最流行的網(wǎng)絡(luò)版式插件之一。通過分拆每個文本，并將每個字母放在定制好的中，該插件能夠讓你精準(zhǔn)的操控標(biāo)題版式。使用它小心的調(diào)整你的字距或者添加各式各樣的CSS，從而讓每個單詞都有超級贊的效果。

FitText.js

交互式網(wǎng)站設(shè)計很好用，它允許內(nèi)容根據(jù)用戶的查看終端的大小自動調(diào)整。自然地你的web文本隨著查看它的瀏覽器或者終端大小變窄而自動收縮，但是某些情況下會使題目和標(biāo)題變得有點難看，尤其是由于文本自動縮進(jìn)或者多出新的一行等情況。這就是FitText.js插件的功能，它能夠使你的標(biāo)題像一張回應(yīng)式圖片一樣調(diào)整大小，單詞不會出現(xiàn)跑到新的一行的情況。

Bacon！

很酷的名字吧，親！Bacon插件能夠讓你的文本像貝塞爾曲線一樣排列。在InDesign中圍繞圖片處理文本固然簡單。但是在HTML/CSS中文本都是按照方塊區(qū)域排列的。所以說雖然能夠強(qiáng)行用HTML能夠達(dá)到相似的效果，但是用Bacon能夠讓你輕松簡潔的利用坐標(biāo)參數(shù)達(dá)到這些效果！

TypeButter

有很多的Jquery插件能夠幫助你調(diào)整字距，但是大多數(shù)要求一些直接的輸入分別控制每一個字母。如果希望找一些快速簡單的方案不如來看看TypeButter。只需將它賦予你的版式類型，它將自動用一些愉悅的合理好看的間距來覆蓋瀏覽器的默認(rèn)值。該插件默認(rèn)支持Arial，Georgia，Helvetica，Times和Verdana。你也可以通過修改一些地方來支持其他的字體。

Kerning.js

盡管這個插件的名稱是Kerning，但是這個插件能做不僅僅是控制字距。它也能夠以字母為單位調(diào)其體大小，顏色，變形來創(chuàng)造各式各樣的絢麗效果。而且它只是控制CSS而不需要添加其他額外的span等其他tag。不錯吧！

Baseline.js

在web設(shè)計中控制縱向間距很簡單吧，只需要我們設(shè)置line-height屬性。不幸的是一旦有圖片插入就沒那么容易了，這個時候就需要Baseline.js了。只需要一行javascript代碼Baseline.js就能夠調(diào)整你的圖片區(qū)域到你想要的位置。換句話說它能讓你的內(nèi)容時刻都與你的基線網(wǎng)格對齊。

Arctext.js

給字體設(shè)置弧度并不是每天都會遇到的情況。但是在一些情況下，比如設(shè)計一個吸引人的標(biāo)題、重設(shè)計一個復(fù)古商標(biāo)，Arctext.js這個插件真的很給力！插件如其名，它能夠根據(jù)你的需要設(shè)置指定半徑長度來做出不同的圓弧。

Hatchshow

我們看到很多畫報的每一行都設(shè)計為一個寬度。現(xiàn)在我們能通過Hatchshow插件輕松達(dá)到這個效果。它自動給每一行文本添加一個并調(diào)整字體大小，所以每一行都會是一樣的寬度。它在經(jīng)典和復(fù)古設(shè)計中會有很大的幫助。

slabText.js

剛開始小編以為slabText.js僅僅是另一個標(biāo)題縮放插件，但實際上它的功能強(qiáng)大的多。slabText結(jié)合了FitText和Hatchshow兩個插件的優(yōu)點將他們?nèi)跒橐惑w。這意味著你有一個交互式標(biāo)題。它能夠智能拆分行并根據(jù)字體大小進(jìn)行縮放。所以一旦查看終端達(dá)到了一定的尺寸，你的標(biāo)題將自動重新組織來保持可讀性，而不是縮放到不可讀的尺寸。

jqlsoText

JqlsoText是一個制作偽等距文字效果的插件，但是到底這個插件是做什么的？總的來說這個插件就是給你的文本從一個值到另一個值放大到不同的尺寸。這個插件同樣很適合創(chuàng)建不同的標(biāo)題或者模仿復(fù)古式文字排版設(shè)計。

網(wǎng)站欄目：10個增強(qiáng)Web字體排版的jquery插件
網(wǎng)頁網(wǎng)址：http://jinyejixie.com/news8/218508.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站收錄、定制開發(fā)、建站公司、商城網(wǎng)站、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)