10個(gè)增強(qiáng)Web字體排版的jquery插件

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

Lettering.js

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

FitText.js

交互式網(wǎng)站設(shè)計(jì)很好用，它允許內(nèi)容根據(jù)用戶(hù)的查看終端的大小自動(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！

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

TypeButter

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

Kerning.js

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

Baseline.js

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

Arctext.js

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

Hatchshow

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

slabText.js

剛開(kāi)始小編以為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)重新組織來(lái)保持可讀性，而不是縮放到不可讀的尺寸。

jqlsoText

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

當(dāng)前名稱(chēng)：10個(gè)增強(qiáng)Web字體排版的jquery插件
本文鏈接：http://muchs.cn/news/218508.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、手機(jī)網(wǎng)站建設(shè)、商城網(wǎng)站、服務(wù)器托管

廣告

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