15 Naudingi žiniatinklio tipografijos įrankiai, bibliotekos ir sistemos

Darbas su tipografija internete buvo tikras egzotiškumas. Kiekviena naršyklė turi savo algoritmą šriftams pateikti kurie gali sukelti netikėtus neatitikimus. Yra tik keletas CSS savybių, kurias galite naudoti tam, kad galėtumėte valdyti šriftus, pvz., Šriftus, šriftus, šriftų kūrimą ir kt..

Geros naujienos yra tai, kad yra išteklių, kuriuos galite naudoti norėdami perimti ratą, kai kalbama apie svetainės tipografiją. Čia yra 15 žiniatinklio įrankių, bibliotekų ir sistemų tuo tikslu galite naudoti.

Daugiau apie „Hongkiat“:

• 9 „WordPress“ papildiniai, skirti daugiau su šriftais
• 20 geriausių WordPress tipografijos įskiepių, kurie pagerintų skaitymą
• Geresnės ir aiškesnės UI piktogramos su interneto šriftais

TypeRendering

Trumpai tariant, TypeRendering veikia panašiai kaip „Modernizr“, išskyrus tik naršyklės variklį, skirtą šrifto atvaizdavimui. Ši biblioteka prideda pasirinktines klases pagal jos atradimus, kurie gali būti naudojami pritaikant konkrečias stiliaus taisykles tipų atvaizdavimui.

KerningJS

„Kerning“ dar negalima pritaikyti naudoti internete - „font-kerning“ parama šiuo metu vis dar yra prasta, tačiau atsiranda naujas standartinis turtas. KerningJS yra „Javascript“ biblioteka, kuri suteikia jums keletą naujų savybių, pvz -raidžių kernas.

 #heading -letter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;  

Atminkite, kad aukščiau pateiktas pavyzdys yra nestandartinis ir taikomas tik su „KerningJS“.

DropcapJS

Nors sukuriant „dropcap“ galima atlikti dabartinius CSS standartus, rezultatas dar nėra tobulas. Kartais tai visiškai nepageidautina. „Adobe Web Platform“ sukurta „DropcapJS“ užduotis yra leisti web dizaineriui lengvai pritaikyti „dropcap“.

PamušalasJS

PamušalasJS yra „JavaScript“ biblioteka, kuri prideda „ linija kiekvienoje eilutės eilutėje. Tai leidžia jums stiliuoti liniją atskirai. Ji imituoja idėją :: nth-line (), :: n-paskutinė eilutė () ir :: last-line pseudo klasės, kurios vis dar nėra CSS. Štai pavyzdys, kaip mes stiliaus pirmos pastraipos eilutę su LiningJS:

 p .line [first] font-weight: 600; teksto transformavimas: didžiosios;  

Be to, LiningJS taip pat palaiko kinų pastraipų srautus.

UnderlineJS

UnderlineJS yra „JavaScript“ biblioteka, kuri leidžia geriau pabrėžti tekstą. Patikrinkite demonstraciją, kad pamatytumėte, ką turiu galvoje, būtinai perkelkite virš linijų. Palyginkite demonstraciją su dabartinės CSS išryškintu išėjimu teksto apdaila standartas ir jūs tikriausiai esate underlineJS gerbėjas.

„FlowType“

Šis įskiepis dinamiškai koreguos šrifto dydį pagal konkretų įvynioklės plotį. „FlowType“ padeda jums taikyti idealų simbolių skaičių kiekvienoje eilutėje bet kuriame ekrano plotyje. Bibliotekoje yra parinkčių, kuriose galima nustatyti min / max ekrano plotį, min / max šrifto dydį ir šrifto santykį.

„HatchShow“

„HatchShow“ padidina šrifto dydį, kad užpildytų visą jo talpyklos plotį. Įskiepis veikia iš dėžutės su algoritmu; Trumpai tariant, jis matuoja konteinerio plotį ir šrifto simbolio ilgį ir prideda tinkamą šrifto dydį.

GridLover

GridLover yra puiki priemonė kurti pagrindinius tipografijos stiliaus stilius (dydis, linijos aukštis ir paraštė) su lengva slankiklio sąsaja. Jis sukuria stilius SCSS, LESS ir Stylus, kad galėtumėte jį įtraukti į savo projektą, nepaisant to, kurį CSS-Preprocessor naudojate.

Tipo skalė

Tipo skalė yra internetinis įrankis, kuris padės jums lengvai nustatyti tinkamą jūsų svetainės šrifto dydį. Priemonė suteikia paprastą intuityvią GUI, kad galėtumėte įterpti pagrindinį šrifto dydį, mastelį ir šriftų šeimą, kurią norite naudoti. Rezultatai bus vizualizuoti jums, kad galėtumėte žaisti su skale, kad gautumėte teisingą vertę. Tiesiog atlikite CSS.

Modulinis skalė

Modulinis skalė yra įrankis, skirtas sukurti idealų šrifto mastelį kūno ir antraštės tekstui. Jis išeina į Sass, kuris turėtų būti naudojamas kartu su Sass biblioteka. Taip pat galite naudoti „JavaScript“ .

Šrifto plotis

Šrifto į plotį (FTW) yra „JavaScript“ biblioteka, leidžianti šrifto pritaikyti prie jo pločio konteinerio. Jis nustatys šrifto dydį kartu su šriftu reikalingu žodžių intervalu. Jei norite padaryti puikią antraštę, tai yra biblioteka, kurią galite pabandyti.

„FFFFallback“

„FFFFallback“, patogus įrankis, leidžiantis surasti geriausią šriftų steką, kuris degraduos gražiai. Įrankis pateikiamas kaip „bookmarklet“ forma, kuri analizuos jūsų puslapio šriftų šeimą ir pasiūlys šriftų rinkinį, kuris bus naudojamas kaip atsarginis.

Šrifto pora

„Google“ šriftas yra viena iš populiariausių milijonų naudojamų žiniatinklio šriftų bibliotekų ir priima virš 500 šriftų šeimų. Šrifto pora yra susietų „Google“ šriftų rinkinys, kuriame galite lengvai rasti įvairią šriftų šeimų ir tipų kombinaciją. Šrifto pora leidžia pasirinkti, kad šriftų poravimas būtų šiek tiek mažesnis.

Tipo nustatymai

Tipo nustatymai yra CSS taisyklių rinkinio rinkinys, skirtas apibrėžti tinkamą šrifto mastelį, vertikalų ritmą ir tipišką tipografijos santykį. „TypeSettings“ yra „Sass“ ir „Stylus“, kuri leidžia lanksčiai patenkinti jūsų projekto poreikius, koreguojant kintamuosius.

Plokštelė

Plokštelė tikriausiai yra vienas iš pilniausių starterių rinkinių tipografijai nustatyti. Įrašykite laivus su tam tikrais pagrindiniais tipografiniais stiliais, kuriais sprendžiamas mastelio keitimas, spalvos, mažas kapitalas, „dropcap“, įtraukimas, brūkšnelis, blokas, kodų blokas ir daug daugiau.

Dabar perskaitykite: „Web Designs“ su gražia tipografija