中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

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

2022-12-01    分類: 網(wǎng)站建設(shè)

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

Lettering.js

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

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!

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

TypeButter

有很多的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ò)吧!

Baseline.js

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

Arctext.js

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

Hatchshow

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

slabText.js

剛開始小編以為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

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

網(wǎng)站欄目:10個(gè)增強(qiáng)Web字體排版的jquery插件
網(wǎng)頁網(wǎng)址:http://www.rwnh.cn/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)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化
吕梁市| 安吉县| 石泉县| 晋宁县| 三明市| 镶黄旗| 吴忠市| 许昌市| 安化县| 溆浦县| 上饶县| 台江县| 隆化县| 海城市| 九寨沟县| 拉孜县| 永顺县| 香格里拉县| 晴隆县| 北京市| 墨竹工卡县| 武隆县| 凉山| 旬邑县| 青州市| 乳山市| 鄢陵县| 哈巴河县| 漯河市| 舞阳县| 光山县| 高雄市| 合肥市| 喜德县| 江口县| 罗山县| 赤水市| 逊克县| 高安市| 澄城县| 郧西县|